Как сделать медиа-запрос с учётом размера экрана и разрешения

При разработке адаптивных сайтов часто возникает ситуация: монитор и планшет имеют одинаковое разрешение (например, 1024×768 пикселей), но элементы страницы выглядят по-разному - на мониторе они крупные, а на планшете слишком мелкие. Это происходит из-за разницы в физических размерах экранов и плотности пикселей (DPI). Чтобы корректно отображать контент, нужно использовать медиа-запросы, которые учитывают не только разрешение, но и реальные габариты дисплея.

Почему одинаковое разрешение даёт разный результат

Физический размер экрана и плотность пикселей напрямую влияют на восприятие элементов. Монитор с диагональю 20 дюймов и планшет с диагональю 10 дюймов при одинаковом разрешении имеют разный DPI. На планшете пиксели мельче, поэтому интерфейс становится трудночитаемым без увеличения. Стандартные медиа-запросы по width и height не решают проблему, так как они опираются на пиксели, а не на физические сантиметры.

Решение: используем device-width и DPI

Для учёта физических размеров экрана применяются CSS-медиа-функции device-width, device-height и resolution. Ключевой приём - комбинировать условие по разрешению и плотности пикселей. Например, если устройство имеет разрешение 1024×768 и высокий DPI (планшет), медиа-запрос может увеличить размер шрифта или блоков.

Пример медиа-запроса с учётом DPI

@media (min-device-width: 768px) and (max-device-width: 1024px) and (min-resolution: 192dpi) {
  body { font-size: 18px; }
  .container { width: 90%; }
}

Здесь мы задаём стили для устройств с шириной от 768 до 1024 пикселей и плотностью пикселей не менее 192 DPI (типично для планшетов). Это позволяет увеличить шрифт и адаптировать контейнеры под маленький экран.

Альтернативный подход: viewport и rem

Ещё один способ - использовать метатег viewport и относительные единицы rem или vw. Установка <meta name="viewport" content="width=device-width, initial-scale=1.0"> гарантирует, что браузер правильно интерпретирует физическую ширину. Затем в CSS можно задать размеры на основе rem, которые будут масштабироваться пропорционально.

Практические рекомендации для адаптивной вёрстки

• Используйте min-resolution и max-resolution в медиа-запросах для учёта плотности пикселей.
• Комбинируйте device-width с resolution, чтобы точнее определять тип устройства.
• Тестируйте на реальных устройствах, так как эмуляторы не всегда передают физические размеры.
• Применяйте относительные единицы (%, vw, rem) для гибкости.

Заключение

Для создания универсального медиа-запроса, который учитывает и разрешение, и размер экрана, необходимо добавить проверку плотности пикселей через resolution. Это позволит корректно отображать сайт как на больших мониторах, так и на компактных планшетах с высоким DPI. Помните, что адаптивная вёрстка требует комплексного подхода: используйте viewport, относительные единицы и тестирование на разных устройствах.