Использование резиновых макетов

Когда я впервые занялся созданием сайтов в конце 1990-х годов, макеты страниц строились на основании таблиц. В большинстве случаев экранное пространство разбивалось на фрагменты, задаваемые в процентах. Например, колонка слева, включающая навигационные элементы, могла занимать 20 % пространства, а область основного содержимого — 80 %. Такого большого разнообразия в размерах браузерных областей просмотра, какое мы наблюдаем сегодня, тогда не было, поэтому макеты нормально работали и масштабировались в рамках ограниченного диапазона областей просмотра. Никого не беспокоило, что на одном экране предложения выглядели немного иначе, чем на другом. Однако, когда на смену пришли дизайны на основе CSS, тот или иной веб-дизайн стал более единообразно отображаться на экранах разных устройств, подражая печатным изданиям. В результате этого перехода для многих людей (включая меня) пропорциональные макеты на долгие годы утратили значение в угоду их жестким, основанным на пикселах собратьям.

Как и все великие идеи и решения, пропорциональные макеты снова вернулись. Мода на малолитражные автомобили, волосы с перманентной завивкой (еще бы!) и расклешенные джинсы со временем возвращалась. Теперь пришло время возродиться и пропорциональным макетам.

В этой главе мы сделаем следующее:

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

— преобразуем показатели ширины элементов, основанные на пикселах, в пропорциональные процентные значения;

— преобразуем размеры верстки, основанные на пикселах, в эквивалентные значения в единицах em;

— разберемся, как определить контекст для любого элемента;

— узнаем, как заставить изображения гибко масштабироваться;

— научимся обеспечивать разные изображения для разных по размеру экранов; О выясним, как медиазапросы могут работать с «резиновыми» изображениями и макетами;

— создадим адаптивный макет с нуля с использованием сеточной системы CSS.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *