Отзывчивый веб-дизайн.

Познакомьтесь с характеристиками.

Однако дело не только в том, чтобы проверить ширину и высоту. Запросы могут проанализировать массу характеристик, указанных в спецификации. Но прежде чем мы приступим к этому делу, давайте сначала определимся с терминами, зачастую сложными и непонятными.

1. В спецификации сказано, что каждое устройство имеет «область просмотра» (display area) и «площадь изображения» (rendering surface). Ну и что это такое? Переведем на наш язык: окно просмотра браузера – это область просмотра, а весь монитор – площадь изображения. На вашем ноутбуке областью просмотра будет окно браузера; площадью изображения – экран.

2. Чтобы задать определенные значения, некоторые характеристики могут принимать префиксы min– и max-. Например, вы можете вписать (min-width: 1024px) и (max-width: 1024px), чтобы задать область просмотра более или менее 1024 пикселей соответственно.

Все понятно? Великолепно. С этим разобрались, давайте рассмотрим характеристики, которые в соответствии со спе-цификацией мы можем использовать в наших запросах (http://bkaprt.com/rwd/28/) (табл. 4.1).

А еще мы можем связывать несколько запросов в цепочку, соединяя их словом and:

@media screen and (min-device-width: 480px) and (orientation: landscape) { … }.

То есть мы можем задать несколько характеристик в одном запросе, выполняя тем самым более сложный анализ устройства, на котором просматривается наш дизайн.