Kako funkcionišu medijski upiti u razvoju veb…

Медијски захтеви омогућавају примену одређених 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 поставља почетни коефицијент зумирања.

Без овог мета-тега многи мобилни прегледачи зумирају страницу по подразумеваној вредности, игноришући стварну ширину уређаја, што нарушава адаптивност.

Kako funkcionišu medijski upiti u razvoju veb stranica za responzivni dizajn, uključujući mobilne uređaje?