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

Изменение макета для просмотра на мобильных устройствах • 235

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

Добавьте к третьему медиазапросу следующие пра-
вила:
@media screen and (max-width: 550px) {
#content-main, #content-secondary {
float: none;
width: 100%;
}
#about, #credits {
float: none;
width: 100%;
}
#credits { margin-top: 1.6em; }
}
Теперь боковой столбец выводится под столбцом
с основным содержимым, а блок Credits из нижней
полосы выводится под блоком About (рис. 6.15).
Мы добавили к блоку div Credits верхнее поле, для
того чтобы визуально разделить два нижних блока
страницы.

Уменьшение высоты
Еще одним полезным изменением дизайна мобиль-
ной страницы стало бы уменьшение высоты элемен-
тов, для того чтобы пользователям не приходилось
слишком долго прокручивать единственный столбец.
Текст слогана и вступительного абзаца можно умень-
шить — пользователи все равно хорошо увидят их на
экране мобильного устройства. Создайте два новых
правила h1 и h1 + p:
h1 { font-size: 225%; }
h1 + p { font-size: 100%; } Рис. 6.15. Теперь весь макет
для очень узкой области
На рис. 6.16 показан результат добавления этого просмотра умещается в один
короткого кода CSS. столбец

www.trk.kg