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

238 • Глава 6. Разные размеры экрана, разный дизайн

на вторую строку, но даже в этом случае компоненты формы лучше размещаются
на странице и оптимально используют доступное пространство.

Рис. 6.18. На экранах мобильных устройств с альбомной ориентацией
три элемента формы в блоке подписки на электронную рассылку
теперь отображаются на одной строке

Наконец, можно немного скорректировать нижний колонитул, также уменьшив его
высоту. Элементы dt внутри блока div credits можно сделать плавающими; здесь
достаточно места для отображения текстовой метки, такой как Web Fonts, рядом
с описанием, например Nadia Serif from Kernest:
#credits dt {
clear: left;
float: left;
margin: -.05em .2em 0 0;
}

Рис. 6.19. Когда метка и описание в ссылке на автора выводятся на одной строке,
блок Credits занимает меньше места на экране

Предотвращение наложения элементов в заголовке
Очевидно, что на небольших экранах мобильных устройств возрастает вероятность
того, что элементы станут наползать один на другой. Пример такой проблемы мож-
но увидеть в заголовке нашей страницы. Когда ширина области просмотра равна
550 пикселам, форма поиска отображается рядом с логотипом, но когда область
просмотра сужается приблизительно до 400 пикселов, эти элементы начинают пере-

www.trk.kg