HTML — это каркас любой веб-страницы или приложения, фундамент, на котором можно построить что-либо значимое, воздух, которым дышит веб-сайт...
Область окна браузера, которая позволяет просматривать веб-страницу, называется областью просмотра (вьюпортом). В область просмотра не входят панели инструментов браузера, адресная строка и т.д
Ввод медиазапросов
Как выяснилось, если ширина окна просмотра больше 800 пикселей, макет становится растянутым. Давайте воспользуемся медиазапросами CSS для подгона макета в зависимости от ширины экрана. Более подробно разберем медиазапросы в главе 3, а пока достаточно знать, что медиазапросы — это директивы CSS, которые позволяют привязывать CSS-правила к определенным условиям среды (в нашем случае это размер экрана).
@media screen and (min-width: 800px) {
/* стили */
}
Директива @media сообщает браузеру о начале медиазапроса, а компонент screen (объявлять его здесь, в принципе, не обязательно, но мы все же будем работать с ним в главе 3) сообщает, что правила должны применяться ко всем типам экранов.
Философию отзывчивого веб-дизайна можно выразить так: это представление веб-содержимого в наиболее удобном формате для окна просмотра и устройства, обращающегося за этим содержимым.
Если содержащий изображение элемент (такой, как body или находящийся внутри него div) меньше полной реальной ширины изображения, браузер отобразит максимально возможный размер этого изображения при таких ограничениях
Если интересно взглянуть на код, который их содержит, скачайте код для этой главы на сайте
http://rwd.education.
Когда вы пишете CSS-код для отзывчивого дизайна, начните с базовых стилей, которые работают на любом устройстве. Отталкивайтесь от макетов для маленьких экранов, а затем используйте медиазапросы, чтобы адаптировать его для больших.
Недостаточно того, что лучше всего смотрится только при определенных размерах.
Представьте, что я ваш отец. С благими намерениями я нахмурился и настойчиво заявляю: «Нет никаких конкретных брейкпоинтов — используй брейкпоинт, если он нужен для дизайна, а не для конкретного устройства!» Ладно, снимаю шапку с надписью «папа» и обещаю не шутить в присутствии ваших друзей.
Для кого эта книга
Вы фуллстек-разработчик, которому нужно развивать навыки фронтенд-разработки? Или фронтенд-разработчик и ищете исчерпывающий обзор по современным HTML и CSS? А может, вы сейчас создаете веб-сайт и вам нужно глубокое понимание отзывчивого веб-дизайна? Эта книга для вас!
Все, что нужно для начала работы, — это современное представление об HTML и CSS. Знание JavaScript не требуется.
