Изучаем CSS3: медиа запросы. Часть 1.
Итак, начнем.
Подготовка страницы к принятию этих запросов в действительности ничем не отличается от вызова внешнего файла CSS. Все, что нам нужно, это добавить несколько параметров в строку HTML-кода. Хорошей идеей будет создать три отдельных CSS файла для вашего сайта, каждый из которых предназначен для какого-то одного типа устройств. Очень часто вы можете встретить подобные файлы с названиями mobile.css, tablet.css и screen.css. Давайте начнем с того, что взглянем на саму ссылку и посмотрим, как мы можем структурировать ее в строке, располагаемой в заголовке файла HTML5:
<link href="mobile.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 340px)" />
В примере выше я запросил «мобильный» файл CSS, поскольку это устройство, вносящее наиболее существенные изменения в наш макет. Для приспособления нашего контента под другие характеристики, к примеру, разрешение планшетника, ваш HTML не будет существенно отличаться от приведенной выше строки для мобильных устройств. Ключевыми элементами, интересующими нас в этой статье, являются медиа-параметры:
<link href="tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 768px)" /> <link href="screen.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)" />
Ваш сайт в планшетном стиле не должен сильно отличаться от оригинальной desktop-версии. Когда речь заходит о планшетных и мобильных устройствах (к примеру, продукции Apple) вам не помешает следовать стратегии продуманного содержимого. Дело в том, что устройства Apple не визуализируют Flash-контент. Именно здесь пригодятся возможности HTML5 работать с аудио и видео. Впрочем, мы поговорим об этом в следующий раз. А пока, возможно, вам пригодится услуга it аудит.
Чем дальше в лес…
Теперь, когда вы настроили «медиа» параметры в HTML заголовке, перейдем непосредственно к сборке CSS. Первым делом начнем с планшета.
Вам не придется менять в теле CSS ничего по сравнению с существующим screen.css, но давайте взглянем на содержимое селектора в нашем tablet.css. Нам нужно изменить значение ширины контейнера на 700 пикселей так, чтобы оно совпадало с размерами медиа-запроса, написанного нами ранее для планшетника.
#container { width: 700px; margin-left: auto; margin-right: auto; } Теперь мы можем начать изменять размеры нашего содержимого. Предположим, в качестве элемента дизайна мы решили включить область с изображением. Создадим уменьшенную версию изображения, подходящую под размеры макета для планшетника и взглянем на нашу CSS.
#container #featured { background-image: url(image/featured-img_tablet.jpg); background- repeat: no-repeat; height: 270px; width: 680px; } Теперь мы изменим ширину текстовой зоны, чтобы она вписывалась в размеры документа:
#container #content { padding: 20px 20px 30px 20px; width: 680px; } Последним, но не менее важным штрихом будет работа с текстом внутри нижнего колонтитула. Если вы взгляните на раздел #footer, вы заметите, что вся работа с ним заключается в простой замене ширины. К примеру:
#footer { width: 700px; padding: 10px 0 30px 0; margin-right: auto; margin-left: auto; } Верите или нет, это все, что вам нужно знать о портировании на планшеты. В следующей статье я расскажу вам о работе с мобильной CSS и о том, как можно применить эти знания на практике.
Перевод статьи
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
