Почему для адаптивных веб-дизайнов необходимы пропорциональные макеты

Несмотря на то что медиазапросы — это невероятно мощный инструмент, у них имеются кое-какие ограничения. Любой дизайн с фиксированной шириной, для адаптации которого к разным областям просмотра используются лишь одни медиазапросы, будет просто «перескакивать» от одного набора CSS-правил, применяемых в медиазапросах, к другому без линейной прогрессии между ними. В главе 2 вы видели, что если ширина области просмотра попадала в промежуток между определенными значениями фиксированной ширины в наших медиазапросах (что может случаться с будущими незнакомыми устройствами и их областями просмотра), то дизайн требовал прибегать к горизонтальной прокрутке в браузере. Вместо этого мы хотим создать дизайн, который будет проявлять гибкость и хорошо смотреться в областях просмотра любых размеров, а не только в тех, что указаны в медиазапросе. Я перейду к главному, пропустив незначительные подробности. Нам необходимо преобразовать наш фиксированный, основанный на пикселах макет в «резиновый» пропорциональный. В результате элементы смогут масштабироваться относительно области просмотра, пока тот или иной медиазапрос не изменит стилизацию.

ОБЪЕДИНЕНИЕ ПРОПОРЦИОНАЛЬНОГО МАКЕТА И МЕДИАЗАПРОСОВ

Ранее я уже упоминал статью Итана Маркотта на тему адаптивного веб-дизайна, расположенную на сайте A List Apart (http://www.alistapart.com/articles/responsive-web-design/). Несмотря на то что инструменты, которые он задействовал («резиновый» макет и «резиновые» изображения, а также медиазапросы), не были новыми, его подход к использованию и объединению идей в одну согласованную методологию отличается новизной. Для многих людей, работающих в сфере веб-дизайна, его статья стала источником новых возможностей. Более того, описанные варианты разработки веб-страниц предложили лучшее из двух областей: способ создать «резиновый» гибкий дизайн на основе пропорционального макета, одновременно имея возможность ограничить гибкость элементов с помощью медиазапросов. Такое объединение образует ядро адаптивного веб-дизайна, создавая нечто действительно большее, чем простое соединение их частей.