Kā darbojas mediju pieprasījumi tīmekļa izstrādē, lai…

Mediju pieprasījumi ļauj piemērot noteiktus CSS stilus atkarībā no ierīces vai skatīšanās laukuma īpašībām. Tie tiek izmantoti adaptīva dizaina izveidei, kas pareizi tiek attēlots dažādos ekrānos, ieskaitot mobilo ierīces, planšetdatorus un datora ekrānus.

Galvenā mediju pieprasījuma sintakse:

@media <mediju_tips> and (<izteiksme>) {
  /* CSS noteikumi */
}

<mediju_tips> nosaka, uz kāda veida ierīces tiek attiecināts pieprasījums (piemēram, screen, print, all).
<izteiksme> nosaka nosacījumus, kuru izpildei tiek piemēroti stili (piemēram, platums, augstums, ekrāna orientācija, izšķirtspēja).

Populāri izteikumi adaptīvai izkārtojumam:

min-width: Stili tiek piemēroti, ja skatīšanās lauka platums ir vienāds vai lielāks par norādīto vērtību.
max-width: Stili tiek piemēroti, ja platums ir vienāds vai mazāks par norādīto vērtību.
orientation: Stili tiek piemēroti atkarībā no ekrāna orientācijas (portrait vai landscape).
resolution: Stili tiek piemēroti atkarībā no ekrāna izšķirtspējas.

Piemērs, izmantojot max-width mobilajiem ierīcēm:

/* Noklusējuma stili */
body {
  font-size: 16px;
}

/* Stili līdz 768px platumam (parasti mobilajiem) */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    padding: 10px;
  }
}

Piemērs, izmantojot min-width darbam ar datora ekrāniem ("mobilais pirmais" pieeja):

/* Mobilajiem paredzētie stili pēc noklusējuma */
.column {
  width: 100%;
}

/* Ekrāniem ar platumu no 992px un vairāk */
@media screen and (min-width: 992px) {
  .column {
    width: 50%;
    float: left;
  }
}

Izteikumu kombinācija ar operatoriem and, or (kas rakstīts ar komatu) un not:

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

@media screen and (orientation: landscape), print {
  /* Peizaža orientācijas ekrāni un drukāšanai */
}

viewport meta-tag ir svarīgs, lai nodrošinātu paretu mediju pieprasījumu darbību mobilajos ierīcēs:

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

width=device-width nosaka skatīšanās laukuma platumu, kas vienāds ar ierīces platumu.
initial-scale=1.0 nosaka sākotnējo mērogu.

Bez šī meta-tag, daudziem mobilo pārlūkprogrammas automātiski mērogo lapu, ignorējot faktiskās ierīces platumu, kas traucē adaptīvu dizainu.

Kā darbojas mediju pieprasījumi tīmekļa izstrādē, lai nodrošinātu pielāgotu dizainu, ieskaitot mobilās ierīces?