Kuidas töötavad meedia päringud veebiarenduses, et…

Meedia-päringud võimaldavad rakendada teatud CSS-tyyle vastavalt seadme või vaadeldava ala omadustele. Need on kasutusel reageeriva disaini loomisel, mis kuvatakse õigesti erinevatel ekraanidel, sealhulgas mobiilseadmetel, tahvelarvutitel ja lauaarvutitel.

Meedia-päringu põhistruktuur:

@media <meedia_tüüp> and (<väärtus>) {
  /* CSS reeglid */
}

<meedia_tüüp> määrab, millisele seadmetüübile päring kehtib (näiteks screen, print, all).
<väärtus> määrab tingimused, mille korral stiile rakendatakse (näiteks laius, kõrgus, ekraani orientatsioon, resolutsioon).

Populaarsed väljendid reageerivaks kujundamiseks:

min-width: Stiile rakendatakse, kui vaadeldava ala laius on võrdne või suurem kui määratud väärtus.
max-width: Stiile rakendatakse, kui laius on võrdne või väiksem kui määratud väärtus.
orientation: Stiile rakendatakse ekraani orientatsiooni põhjal (portrait või landscape).
resolution: Stiile rakendatakse ekraani resolutsiooni põhjal.

Näide max-width kasutamisest mobiilseadmetel:

/* Vaikimisi stiilid */
body {
  font-size: 16px;
}

/* Stiilid kuni 768px laiusele ekraanile (tüüpiline mobiilidele) */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    padding: 10px;
  }
}

Näide min-width kasutamisest desktopidele ("mobile first" lähenemine):

/* Mobiilidele mõeldud stiilid vaikimisi */
.column {
  width: 100%;
}

/* Ekranid alates 992px laiusega */
@media screen and (min-width: 992px) {
  .column {
    width: 50%;
    float: left;
  }
}

Väljendite kombinatsioon operaatoreid and, or (mis kirjutatakse komaga) ja not:

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Ainult tahvelarvutid */
}

@media screen and (orientation: landscape), print {
  /* Maapinnas orientatsioon ja trükk */
}

viewport meta-täht on oluline mobiilseadmetel meedia-päringute korrektseks toimimiseks:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width määrab vaadeldava ala laiuse seadme laiusega võrdseks.
initial-scale=1.0 määrab algse suumimise taseme.

Ilma selle meta-täheta suurendavad paljud mobiilibrauserid lehte automaatselt, ignoreerides seadme tegelikku laiust, mis häirib reageerivust.

Kuidas töötavad meedia päringud veebiarenduses, et tagada reageeriv disain, sealhulgas mobiilseadmed?