Media Query w JavaScript’cie
Responsive Web Design — (RWD) jest to technika projektowania strony www, tak aby jej wygląd i układ dostosowywał się automatycznie do rozmiaru okna urządzenia, na którym jest wyświetlany. Strona tworzona w takiej technice jest uniwersalna i wyświetla się dobrze zarówno na wielkich ekranach (np. Full HD), jak i na ekranach smartfonów czy tabletów. Strony te tworzymy w oparciu o Media Queries, czyli wybór medium do którego ma być dostosowana nasza strona.
Dla ścisłości. Media Query pozwala nam oddzielić kod który ma być wyświetlany na komputerze od tego na telefonie. Stosujemy 2 techniki przy RWD, normalną — czyli na łatwiznę. Tworzymy stronę w całości a potem dostosowujemy ją do coraz mniejszych ekranów za pomocą max-height, lub “mobile-first”, czyli najpierw telefon, potem komputer. Jest to o tyle lepsze, że nie wczytujemy całego kodu na telefon, a tylko to, co ma być na nim wyświetlone. A na komputerze mamy już szybsze łącze i możemy pozwolić sobie na trochę KB więcej. Jest to jednak o tyle trudne, że zaczynamy od telefonów a potem idziemy w górę. Czyli plusy i minusy.
W CSS’ie media queries deklarujemy np. tak:
/* Małe urządzenia (tablety, 768px and up) */
@media (min-width: 768px ) { ... }/* Średnie urządzenia (laptopy, 992px and up) */
@media (min-width: 992px ) { ... }/* Duże urządzenia (duże ekrany, 1200px and up) */
@media (min-width: 1200px ) { ... }Oczywiście to, czego nie zdefiniujemy w tym przypadku będzie widoczne na wszystkich ekranach, wiec poniżej 768px też. W JavaScripcie już tak nie możemy, jednak można to bardzo prosto obejść:var mq = window.matchMedia( "(min-width: 768px)" );
if (mq.matches) {
// rozmiar okna ponad 768px
}
else {
// rozmiar okna do 768px
}I w zasadzie to tyle. Kodu jest ciut więcej, ale efekt ten sam. Pytanie tylko poco w Javie mi media query? A no po to, że nie każdą wtyczkę chcemy mieć na telefonie. np. Paralax się już tnie, więc wypadałoby go wyłączyć. I tu przychodzi nam taki kod z pomocą. Mam nadzieję, że pomogłem :)
