Zastosowanie media queries - responsywne strony www

Specjalność wykonywania witryn internetowych uległa w szeregu zeszłych lat istotnemu przeobrażeniu. Dzisiaj wszędzie gdzie byś tylko nie wyruszył to dostrzegasz pełno osób wlepionych w ekraniki smartfonów, jakie nie są już zwykłymi telefonami jak kiedyś, ale niedużymi kieszonkowymi komputerami, na jakich też można zwiedzać witryny internetowe. Jest jednak pewno ale.. Czytanie utworzonej w konwencjonalnym ujęciu strony internetowej na tym miniaturowym urządzeniu jest drogą przez mękę.

Klasyczne ujęcie znamionuje stałą szerokość witryny co owocuje nieodzowność permanentnego posuwania ekranu w każdą stronę na powiększeniu aby odczytać jej zawartość. Jest to na tyle kłopotliwe, iż powstały mechanizmy dopuszczające obejść taki dylemat, a do słownika specjalistycznego na trwałe już wszedł termin responsive web design, po swojsku zwany jako strony responsywne.

Szczególnie zrozumiale da się wyłuszczyć regułę ich działania w taki sposób, że witryna responsywna modyfikuje sposób pokazywania zawartości do szerokości monitora urządzenia. Realizuje się to wykorzystując mechanizmy zintegrowane w kaskadowych arkuszach stylów CSS. Mechanizmy takie nazywamy „media queries”. Najpospolitszy wzorzec na zastosowanie media queries w pliku css:

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

tutaj jest twój kod css

}

skutkuje, iż przy monitorze o szerokości od 768px, jednak poniżej 1200px zamiast generalnych ustawień wykona się kod zawarty między nawiasami klamrowymi. Absolutnie zamiast pikseli da się zastosować różne jednostki miary np. em, rem czy procenty.

Dzięki wykorzystaniu tego rodzaju mechanizmu twe strony internetowe będą dostosowywać się mechanicznie do powierzchni monitora urządzenia.

Potrzeba pamiętać również o sekwencji osobnych bloków kodu html, bo na urządzeniu mobilnym lepiej nie wprowadzać pozycjonowania absolutnego i kod wykona się jeden po drugim (niegdyś częstokroć stosowało się umiejscowienie zarówno nagłówka jak i stopki na dole – ze względów na optymalizację pozycjonowania, by zawartość zasadnicza była jak najwyżej w kodzie, jednakże dla witryn responsywnych troszkę mąci to pokazywanie w odpowiedniej kolejności).