Подстраиваем дизайн под области просмотра с разной шириной

Разобравшись с нашей проблемой с помощью тега <meta> с атрибутом name="viewport", мы сделали так, что теперь браузеры не будут самовольно изменять масштаб страницы, поэтому можем заняться подстройкой дизайна под области просмотра с разной шириной. Мы добавим в CSS-код медиазапрос, касающийся таких устройств, как планшетные компьютеры (например, iPad), у которых ширина области просмотра в книжной ориентации равна 768 пикселам (поскольку в альбомной ориентации она равна 1024 пикселам, при загрузке страницы в такой ориентации она будет отлично смотреться).

@media screen and (max-width: 768px) {

#wrapper { width: 768px;

}

#header,#footer,#navigation { width: 748px;

}

}

Наш медиазапрос будет изменять ширину элементов wrapper, header, footer и navigation, если ширина области просмотра не будет превышать 768 пикселов. На рисунке 2.10 показано, как все это будет выглядеть на экране iPad.

Этот пример сильно воодушевил меня. Содержимое теперь подгоняется под экран iPad (или любую область просмотра шириной не более 768 пикселов) без обрезки. Однако нам необходимо внести корректировки, которые будут касаться навигационной области, поскольку ссылки простираются за пределы фонового изображения, а область основного содержимого плавает под врезкой (она слишком широкая, чтобы уместиться в доступном пространстве). Внесем изменения в наш медиазапрос в CSS, как показано в следующем фрагменте кода:

@media screen and (max-width: 768px) {

#wrapper { width: 768px;

}

#header,#footer,#navigation { width: 748px;

}

#content,#sidebar { padding-right: 10px; padding-left: 10px; width: 728px;

}

}

Теперь врезка и область содержимого будут заполнять всю страницу целиком и иметь небольшие отступы по краям. Однако это не очень хороший вариант. Я хочу, чтобы первым шло содержимое, а уж затем врезка (по своей природе это второстепенная область). Я допущу здесь еще одну глупую ошибку, если для обеспечения недостаточно привлекательного вида сайта попытаюсь применить истинную методологию адаптивного веб-дизайна.

Содержимое сайта подстраивается под область отображения.