Kaip veikia medijos užklausos interneto kūrime…

Medijos užklausos leidžia taikyti tam tikrus CSS stilius priklausomai nuo įrenginio ar peržiūros srities ypatybių. Jie naudojami kuriant adaptuojamą dizainą, kuris teisingai rodomas įvairiuose ekranuose, įskaitant mobiliuosius įrenginius, planšetinius kompiuterius ir darbalaukio kompiuterius.

Pagrindinė medijos užklausos sintaksė:

@media <medijos_tipas> and (<išraiška>) {
  /* CSS taisyklės */
}

<medijos_tipas> nustato, kam įrenginiui taikoma užklausa (pavyzdžiui, screen, print, all).
<išraiška> nustato sąlygas, kuriomis taikomi stiliai (pavyzdžiui, plotis, aukštis, ekrano orientacija, raiška).

Populiarūs išraiškos būdai adaptuojamam maketui:

min-width: Stiliai taikomi, jei peržiūros srities plotis yra lygus arba didesnis už nurodytą reikšmę.
max-width: Stiliai taikomi, jei plotis yra lygus arba mažesnis už nurodytą reikšmę.
orientation: Stiliai taikomi priklausomai nuo ekrano orientacijos (portrait arba landscape).
resolution: Stiliai taikomi priklausomai nuo ekrano raiškos.

Pavyzdys naudojant max-width mobiliesiems įrenginiams:

/* Numatyti stiliai */
body {
  font-size: 16px;
}

/* Stiliai iki 768px pločio ekranams (dažniausiai mobiliesiems) */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    padding: 10px;
  }
}

Pavyzdys naudojant min-width darbalaukio ekranams ("mobila pirmiausia" požiūris):

/* Mobiliesiems numatyti stiliai */
.column {
  width: 100%;
}

/* Ekranams nuo 992px pločio ir daugiau */
@media screen and (min-width: 992px) {
  .column {
    width: 50%;
    float: left;
  }
}

Išraiškų derinimas su operatoriais and, or (kuris rašomas per kablelį) ir not:

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Tik planšetiniams kompiuteriams */
}

@media screen and (orientation: landscape), print {
  /* Peizažo orientacijos ekranai ir spausdinimui */
}

viewport meta žymė yra svarbi tinkamai veikti medijos užklausoms mobiliuosiuose įrenginiuose:

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

width=device-width nustato peržiūros srities plotį, lygų įrenginio plotį.
initial-scale=1.0 nustato pradinį mastelį.

Be šios meta žymės, daugelis mobiliųjų naršyklių automatiškai mastelina puslapį, ignoruodamos tikrąjį įrenginio plotį, kas trikdo adaptaciją.

Kaip veikia medijos užklausos interneto kūrime, įskaitant mobiliuosius įrenginius, atsakingo dizaino tikslais?