Чӣ гуна кор мекунанд дархостҳои васоити ахбори омма…

Пулҳои медиавӣ имкон медиҳанд, ки стилҳои CSS муайян дар асоси хусусиятҳои дастгоҳ ё минтақаи тамошо татбиқ шаванд. Онҳо барои эҷоди тарҳи ҷавобгӯ истифода мешаванд, ки дар экранҳои гуногун, аз ҷумла дастгоҳҳои мобилӣ, планшетҳо ва десктопҳо дуруст намоиш дода мешавад.

Синтаксиси асосии талаботи медиа:

@media <тиби_медиа> and (<израз>) {
  /* қоидаҳои CSS */
}

<тиби_медиа> муайян мекунад, ки ба кадом навъи дастгоҳ талабот татбиқ мешавад (масалан, screen, print, all).
<израз> шароитҳоро муайян мекунад, ки дар асоси онҳо стилҳо татбиқ мешаванд (масалан, паҳноӣ, баландӣ, самтгирии экран, тасвир).

Ифодаҳои маъмул барои тарҳи ҷавобгӯ:

min-width: Стилҳо татбиқ мешаванд, агар паҳнои минтақаи тамошо баробар ё калонтар аз арзиши нишон додашуда бошад.
max-width: Стилҳо татбиқ мешаванд, агар паҳнои минтақаи тамошо баробар ё хурдтар аз арзиши нишон додашуда бошад.
orientation: Стилҳо дар асоси самтгирии экран татбиқ мешаванд (portrait ё landscape).
resolution: Стилҳо дар асоси тасвирнокии экран татбиқ мешаванд.

Масалан барои истифодаи max-width барои тарҳрезии дастгоҳҳои мобилӣ:

/* Стилҳо дар асоси пешфарз */
body {
  font-size: 16px;
}

/* Стилҳо барои экранҳои то 768px паҳноӣ (одатан барои мобилӣ) */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    padding: 10px;
  }
}

Масалан барои истифодаи min-width барои тарҳрезии десктопҳо (тарафа "мобил аввал"):

/* Стилҳо барои мобилӣ дар асоси пешфарз */
.column {
  width: 100%;
}

/* Стилҳо барои экранҳои паҳноии аз 992px ба боло (одатан барои десктопҳо) */
@media screen and (min-width: 992px) {
  .column {
    width: 50%;
    float: left;
  }
}

Комбинатсияи изразҳо бо операторҳо and, or (or дар талаботи медиа бо зарбаи ҷудо карда мешавад) ва not:

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Стилҳо танҳо барои планшетҳо */
}

@media screen and (orientation: landscape), print {
  /* Стилҳо барои самтгирии ландшафт ва барои чоп */
}

Мета-теги viewport барои кори дурустии талаботи медиа дар дастгоҳҳои мобилӣ муҳим аст:

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

width=device-width паҳнои минтақаи тамошо баробар бо паҳнои дастгоҳро муқаррар мекунад.
initial-scale=1.0 коэффициенти аввалини масштабро муқаррар мекунад.

Бе ин мета-тег, бисёре аз браузерҳои мобилӣ саҳифаро ба таври худкор масштаб мекунанд, ки паҳнои воқеии дастгоҳро нодида мегиранд, ки ин ба ҷавобгӯӣ халал мерасонад.

Чӣ гуна кор мекунанд дархостҳои васоити ахбори омма дар таҳияи веб барои тарҳи ҷавобгӯ, аз ҷумла дастгоҳҳои мобилӣ?