Zmiana układu
Poprzedni Zadanie 6: Język Less Następny

Zmiana układu

Zaprojektuj zmianę układy strony dla urządzeń mobilnych. Wykorzystaj zapytania o media (media query) oraz zagnieżdżenie w selectorach less.

Monitory o szerokości mniejszej niź 800px:

  • Menu powinno zostać wyśrodkowane (v. Rysunek 6.3).

    Rysunek 6.3. Menu na ekranie mniejszym niż 800px

    Menu na ekranie mniejszym niż 800px

  • Kolejność rozdziałów: nagłówek, menu, część główna, aktualności i najważniejsze informacje obok siebie, stopka (v. Rysunek 6.4).

    Rysunek 6.4. Kolejność rozdziałów na ekranie mniejszym niż 800px

    kolejność rozdziałów na ekranie mniejszym niż 800px

Monitory o szerokości mniejszej niź 600px:

  • Menu powinno zostać wyświetlone pionowo (v. Rysunek 6.5).

    Rysunek 6.5. Menu na ekranie mniejszym niż 600px

    Menu na ekranie mniejszym niż 600px

  • Kolejność rozdziałów: nagłówek, menu, część główna, aktualności, najważniejsze informacje, stopka — jedno pod drugim(v. Rysunek 6.6).

    Rysunek 6.6. Kolejność rozdziałów na ekranie mniejszym niż 600px

    kolejność rozdziałów na ekranie mniejszym niż 600px

Poprzedni Początek rozdziału Następny
Zadanie Spis treści Zasoby i kompilator less