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

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

Давайте также поменяем ширину блоков div about и credits внизу страницы, для
того чтобы их размер соответствовал размеру основного содержимого. Добавьте
их идентификаторы к правилам #content-main и #content-secondary нашего
медиазапроса:
#content-main, #about {
width: 58%;
margin-left: 18%;
}
#content-secondary, #credits { width: 20%; }

Теперь все элементы страницы расположены так, чтобы она наилучшим образом
смотрелась в широком окне (рис. 6.3). Сохраните документ и откройте его в со-
временном браузере. Растяните окно — вы увидите, как при пересечении границы
в 1200 пикселов макет автоматически поменяется.

Рис. 6.3. Элементы страницы теперь распределяются свободнее,
оптимально используя пространство в широком окне

коротко о медиазапроСах

Медиазапросы описаны в одноименном модуле, который вы найдете по адресу http://
www.w3.org/TR/css3-mediaqueries. Они позволяют настраивать стили разными способа-
ми в зависимости не только от типа медианосителя, такого как screen и print, но также от

www.trk.kg