Stosowanie Media Queries w stylach CSS, wymiary ekranów

Wprowadzenie

Tworzenie stron www wymaga przygotowania strony pod różne ekrany i urządzenia. Style CSS pozwalają projektantowi na dostosowanie wyglądu strony do konkretnej szerokości ekranu.

Dziś powinno się projektować strony pod telefony w pierwszej kolejności, a dopiero potem określać wygląd dla urządzeń o szerszych ekranach, czyli laptopów i PC-etów (desktops).

Takie podejście projektanta nazywa się mobile first

W arkuszu stylu CSS stosujemy media queries i zdefiniujemy przykładowe parametry dla znacznika body pod różne ekrany.

Mobile first - definicje, które należy umieścić w stylu CSS

Wymiary urządzeń, które należy stosować i kolejność



body{ width: 100%; background: #000; color: #fff; font-size: 16px; font-family: Arial, sans-serif; }

/*dla wszystkich urządzeń definicja ogólna, szerokość 100%, biała czcionka, czarne tło */

@media only screen and (min-width : 320px) { body{ width: 95%; margin: 0 auto; font-size:1.2em; } }

/* dla iPhone Retina :kolor i tło bez zmian, czcionka powiększona 1.2em, zastosuję również od tej szerokości wyrównanie strony do środka i szerokość body mniejszą od szerokości wcześniej zdefiniowanej */

@media only screen and (min-width : 480px) { body{ width: 90%; } }

/* telefony o małym ekranie: kolor i tło bez zmian czcionka 1.2em, tak jak zdefiniowałem wyżej, jedynie szerokość body mniejsza od tego rozmiaru */

@media only screen and (min-width : 768px) { body{ font-size:1.5em; }

/* tablety i małe tel. o małym ekranie: powiększam jedynie czcionkę, czcionka 1.5em, reszta pozostaje bez zmian, tak jak została zdefiniowana wcześniej */

@media only screen and (min-width : 992px) { body{ width: 1024px; background: #fff; color: #000; } }

/* Średnie urządzenia: od tej szerokości szerokość podaję w px, zmieniam kolor tła i kolor czcionki ( od teraz będzie odwrotnie, czyli białe tło i czarna czcionka, nie tak jak w definicji na początku */

@media only screen and (min-width : 1200px) { body{ width: 1200px; font-size:2em; } }

/* szerokie ekrany: powiększam czcionkę i szerokość body, reszta jest bez zmian */

Desktop first

Drugie możliwe i niezalecane podejście projektanta nazywa się desktop first. Wtedy zaczynamy od najszerszego urządzenia i zmniejszamy szerokości urządzeń.

@media only screen and (max-width : 1200px) { }

@media only screen and (max-width : 992px) { }

@media only screen and (max-width : 768px) { }

@media only screen and (max-width : 480px) { }

@media only screen and (max-width : 320px) { }

2016-09-14