Ввод медиазапросов
Как выяснилось, если ширина окна просмотра больше 800 пикселей, макет становится растянутым. Давайте воспользуемся медиазапросами CSS для подгона макета в зависимости от ширины экрана. Более подробно разберем медиазапросы в главе 3, а пока достаточно знать, что медиазапросы — это директивы CSS, которые позволяют привязывать CSS-правила к определенным условиям среды (в нашем случае это размер экрана).
Философию отзывчивого веб-дизайна можно выразить так: это представление веб-содержимого в наиболее удобном формате для окна просмотра и устройства, обращающегося за этим содержимым.
@media screen and (min-width: 800px) {
/* стили */
}
Директива @media сообщает браузеру о начале медиазапроса, а компонент screen (объявлять его здесь, в принципе, не обязательно, но мы все же будем работать с ним в главе 3) сообщает, что правила должны применяться ко всем типам экранов.