Dziś kolejny artykuł z pogranicza, na temat CSS media queries, który nabiera dużego znaczenia zwłaszcza w kontekście współczesnych aplikacji WWW.

CSS media queries

Jest to moduł CSS3, który umożliwia renderowanie zawartości odpowiedniej dla danego typu urządzenia, w zależności od parametrów takich jak rozdzielczość ekranu. Funkcjonalność ta jest właściwie podstawą technologii Responsive Web Design, czyli w skrócie tworzenia elastycznych witryn, działających i wyglądających dobrze na możliwie wielu różnych urządzeniach (szczególnie mobilnych).

Użycie media queries

Należy określić typ @media oraz jedno lub więcej wyrażeń obejmujących właściwości. Jeśli na danym urządzeniu nastąpi dopasowanie do tych warunków, wtedy zostaną zastosowane zdefiniowane style CSS.

Przykład:

@media screen and (min-width: 480px) { 
    border: solid 1px;
}

CSS media queries można także zastosować do dołączania całych plików ze stylami.

Przykłady:

<link rel="stylesheet" type="text/css" href="my_file.css" 
    media="(max-width: 800px)" />

<link rel="stylesheet" type="text/css" href="small_device.css" 
    media="only screen and (max-width: 480px)" />

Jak widać intensywnie używane są tutaj parametry min-width lub max-width określające minimalną lub maksymalną szerokość ekranu, spełniającą warunki do zastosowania danych reguł CSS.

Operatory logiczne

Możliwe jest łączenie poszczególnych warunków używając operatorów logicznych, takich jak not, and, only.

Przykłady – operatory logiczne w CSS media queries:

/* 1. Reguły CSS dla szerokości 760px lub mniej */
@media screen and (max-width: 760px) {
  body {
    font-weight: none;
  }

  div#leftcolumn {
    display: none;
  }

  ...
}


/* 2. Reguły CSS dla szerokości pomiędzy 600 a 1200px */

@media (min-width: 600px) and (max-width: 1200px) {
    /* Reguły CSS ... */
}

Możemy określać orientację ekranu:

@media (min-width: 720px) and (orientation: landscape) { 
    ... 
}

a także definiować różne rodzaje mediów, które oddzielamy przecinkami, na przykład:

@media screen and (min-width: 1280px), print and (min-resolution: 300dpi) {
    /* Reguły CSS ... */
}

Zachowanie przecinka w tym przypadku jest podobne do operatora OR. Tym sposobem możemy dowolnie kształtować to, co pokaże się na małym smartfonie, ekranie iPada czy telewizora.

Więcej przykładów zapytań

/* wszystkie urządzenia */
@media all { ... }

/* tylko do druku */
@media print { ... }

/* powierzchnia wyświetlania HD 1080 lub większa */
@media (min-width: 1920px) { ... }

/* powierzchnia wyświetlania w formacie HDTV */
@media (aspect-ratio: 16/9) { ... }

/* ekran w pozycji pionowej */
@media all and (orientation: portrait) { ... }

/* ekran w pozycji poziomej */
@media all and (orientation: landscape) { ... }

/* ekrany o wysokości dokładnie 1080px */
@media (device-height: 1080px) { ... }

Zatem w CSS3 mamy duże pole manewru jeśli chodzi o określanie typów i rozmiarów ekranów urządzeń. A jak to zrobić w JavaScript? Tak samo – użyć media queries.

Matchmedia i użycie media queries w JavaScript

Powiązanym API jest window.matchMedia, które pozwala testować zadane warunki.

Przykład:

var mq = window.matchMedia( "(min-width: 600px)" );

Zdefiniowaliśmy warunek, który w dalszej kolejności możemy sprawdzić i wykonać pożądane akcje w kodzie JavaScript:

if (mq.matches) {
    alert('Okno ma przynajmniej 600px');
} else {
    alert('Ekran jest za mały ...');
}

Polecam rzucić okiem także na stronę ‚Testing media queries’ na MDN:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Testing_media_queries

Alternatywnym sposobem jest użycie biblioteki Modernizr, omawianej już przy okazji Szybkiego kursu HTML5.

Biblioteka ta posiada także funkcje testowania media queries, na przykład:

Modernizr.mq('only all and (max-width: 600px)')

Szczegóły znajdziemy w dokumentacji biblioteki:

http://modernizr.com/docs/#mq

Zasoby

Jak zwykle garść zasobów dla dociekliwych:

– CSS media queries na stronach Mozilla:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

– użycie media queries w praktyce:

http://css-tricks.com/css-media-queries/

– strona o CSS media queries, w tym narzędzia do testowania, przykłady, a nawet takie zagadnienia jak Responsive Adsense:

http://cssmediaqueries.com/

Podsumowanie

CSS media queries nabierają na znaczeniu. Ich opanowanie nie zajmie dużo czasu, a z pewnością warto być z obeznanym z ich użyciem.

Życzę miłej pracy / zabawy z media queries.

Dominik Wlazłowski

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

     

Podaj dalej: 31101