Page 215 - Сила CSS3 Освой новейший стандарт

Подгонка макета под большой экран • 215

ли эти таблицы стилей. Большинство не поддерживающих данную возможность
браузеров все равно не стали бы использовать эту таблицу, но дополнительная
предосторожность не помешает. Ключевое слово only не требуется, когда правило
@media добавляется напрямую в главную таблицу стилей.

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

ПОдгОнка макета ПОд бОльшОй экран

Мы начнем со стилей для больших экранов. Загрузите файлы упражнений для этой
главы с сайта http://www.stunningcss3.com и откройте файл media-queries_start.
html в любом редакторе кода. Код CSS содержится в элементе style внутри тега
head страницы.
Дизайн этой страницы начинает казаться излишне растянутым в окне шириной
от 1200 пикселов, поэтому я предлагаю добавить медиазапрос, который будет при-
меняться только в таких широких окнах. Добавьте следующий код CSS после всех
существующих стилей в элементе style внутри тега head:
@media screen and (min-width: 1200px) {
}

Этот медиазапрос должен находиться в самом конце списка стилей — так по
правилам каскада CSS он переопределит предыдущие стили. Данный запрос со-
общает браузеру, что стили внутри запроса должны применяться только к типам
медианосителей screen и только в случае, когда ширина пользовательской области

www.trk.kg