Как работят медийните заявки във уеб разработката за…

Медийните заявки позволяват да се прилагат определени 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 за стилизиране на десктопи (подход "mobile first"):

/* Стилове за мобилни по подразбиране */
.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 задава началния коефициент на мащабиране.

Без този мета-тег много мобилни браузъри мащабират страницата по подразбиране, игнорирайки реалната ширина на устройството, което нарушава адаптивността.

Как работят медийните заявки във уеб разработката за адаптивен дизайн, включително мобилни устройства?