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

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

в этОм урОке

Мы отредактируем макет целой страницы, чтобы она красиво отображалась на
экранах разного размера. Для этого мы применим следующие возможности CSS3:

медиазапросы, выборочно применяющие стили в зависимости от свойств поль-
зовательского устройства;

многостолбцовый макет, для того чтобы текст перетекал между расположенными
бок о бок столбцами.

базОвая страница

На рис. 6.1 показан макет страницы нашей вымышленной пекарни. Это «жидкий»
макет (также называемый «текучим»), приспосабливающийся к ширине окна брау-
зера. Он хорошо смотрится на экранах разного размера: при изменении ширины окна
на этой странице не появляются горизонтальные полосы прокрутки, а элементы не
нахлестываются друг на друга. Однако нельзя отрицать, что не в каждом размере
наша страница смотрится идеально. В очень широких и очень узких окнах она вы-
глядит и работает пристойно, но не так привлекательно, как на экранах шириной
800–1200 пикселов (рис. 6.2).

Рис. 6.1. Домашняя страница вымышленной пекарни Little Pea Bakery
в окне браузера шириной 1024 пиксела

www.trk.kg