Czy są jakieś poradniki o skalowaniu w css ?

pytanie zadane 25 października 2015 w HTML i CSS przez DariuszH Gaduła (3,100 p.)

Szukam jakichś poradników o skalowaniu strony i ich elementów. Jest gdzieś może to po ludzku wytłumaczone ? A w szczególności skalowanie elementów menu ? :)

1 odpowiedź

odpowiedź 25 października 2015 przez Patrycjerz Mędrzec (192,320 p.)

Naprawdę, użytkowanie wyszukiwarki forumowej boli, i to bardzo... https://forum.pasja-informatyki.pl/43848/rwd-responsywnosc-na-czym-to-polega?show=43848#q43848.

komentarz 25 października 2015 przez DariuszH Gaduła (3,100 p.)

Nie ma tam nic o co mi chodzi :) Ubzdurałem sobie, że muszę koniecznie to umieć i koniec, nie bacząc na to że jest to niemożliwe :) Dobrze,że jest o skalowaniu całej strony, co szybko załapałem :)

Wydaje mi się, by menu uległo zmniejszeniu (NIE PRZESUNIECIU WZGLĘDEM INNYCH ELEMENTÓW) po skalowaniu okna przeglądarki ze 100% do np. 45% muszę je wykonać nie na zasadzie <ul><li> tylko w divach :)

komentarz 25 października 2015 przez furas Maniak (53,800 p.)

Nie ma znaczenia czy użyjesz <li> czy <div>. Ważne jakie reguły CSS do nich dodasz.

Jeśli w CSS będziesz rozmiary podawać w procentach (np. width: 100%) to będą się one zmniejszać płynnie wraz ze zmniejszaniem okna. Ale w pewnym momencie elementy mogą być tak małe, że nie będzie dało się z nich korzystać. Dlatego też w RWD zamiast ciągłego zmniejszania elementów przestawia się je tak aby wciąż miały rozsądny rozmiar.

komentarz 25 października 2015 przez DariuszH Gaduła (3,100 p.)

coś tam pomogła zamiana na procenty :) Elementy nie szaleją, ale są w stałym miejscu. Wysyłam Ci kod. Może coś mnie oświecisz :)

             <ul id="menu">
  <li><a href="/html/default.asp">O MNIE</a></li>
  <li><a href="/css/default.asp">AKTUALNOŚCI ZE ŚWIATA NAUKI</a></li>
  <li><a href="/js/default.asp">ASTRONOMIA</a></li>
  <li><a href="/php/default.asp">PRZYRODA</a></li>
  <li><a href="/html/default.asp">PODSTAWY ASTRONOMII</a></li>
  <li><a href="/css/default.asp">AKTUALNOŚCI ZE ŚWIATA NAUKI</a></li>
  <li><a href="/js/default.asp">GALERIA</a></li>
  <li><a href="/js/default.asp">CIEKAWOSTKI</a></li>
  <li><a href="/php/default.asp">KONTAKT</a></li>
  </ul>

css3

ul#menu {

    width:100%;

    padding: 0;
    padding-left:1%;
}

ul#menu li {
    display: inline;

}

ul#menu li a {
    background-color: black;
    color: white;
    padding: 0.4% 1%;
    text-decoration: none;

}

ul#menu li a:hover {
    background-color:#1589FF;
}