Page 229 - Сила CSS3 Освой новейший стандарт
P. 229
Изменение макета под небольшой экран • 229
Это правило делает поля с рекламируемыми продуктами не плавающими и удаляет
процентные значения ширины для них. Кроме того, в каждом поле удаляется пустое
пространство сверху, но добавляется слева — там выводится фоновое изображение
с соответствующей иллюстрацией.
Рис. 6.12. Поля рекламируемых продуктов выводятся в столбик,
а соответствующие иллюстрации отображаются слева, а не наверху —
это оптимальный вариант расходования пространства в узком окне
В версию страницы для узкого окна осталось внести только одно изменение: правый
столбец сейчас очень узкий, и длинные слова могут выходить за его пределы. Осо-
бенно это актуально для заголовков, которые выводятся заглавными буквами и за-
нимают довольно много места. Для того чтобы снизить вероятность выхода за
пределы поля, уменьшим размер текста и расстояние между символами:
h3 {
font-size: 100%;
letter-spacing: 0;
}
Рис. 6.13 иллюстрирует эти изменения. И снова Страница со всеми изменениями,
они едва заметны, но эти несколько строк кода которые мы внесли до настояще-
гарантируют, что текст не вылезет за пределы го момента, называется media_
своего поля, и пользователям будет удобно его queries_2.html. Она сохранена
читать. в папке с остальными файлами
Мы закончили стилизацию узкой версии веб- упражнений для этой главы.
страницы нашей пекарни (рис. 6.14). Сохраните
www.trk.kg
