Урок 2. Адаптивный веб-дизайн с использованием медиазапросов в CSS 3
В последнем уроке «Введение в адаптивный веб-дизайн» мы познакомились с адаптивным веб-дизайном.
Сегодня мы узнаем, как использовать медиа-запросы, которые по сути являются условиями в стилях CSS, которые позволяют активировать и деактивировать различные стили в зависимости от размера экрана.
Сначала рабочий стол против первый шаг для мобильных устройств
Для адаптивного веб-дизайна можно использовать два основных подхода.
Сначала рабочий стол
Когда появляется адаптивный веб-сайт, большинство из нас представляет себе веб-сайт, созданный для настольных компьютеров, который затем будет адаптирован для мобильных устройств. Вот так он начал свой день — легко и относительно эффективно. По сути, мы создаем обычную страницу, как и раньше, и переставляем элементы в соответствии с правилами для имен ЕЎGE™ky.
Однако метод имеет одну фундаментальную проблему . Изменение макета сайта для разных устройств довольно сложно и требует переписывания больших кусков кода, а мы точно не хотим писать много кода, не так ли? Кроме того, часто возникает некорректное отображение. Вы это прекрасно знаете — что-то будет отображаться хорошо, а что-то нет — это беда.
Сначала мобильные
Mobile first – это метод создания веб-сайта, который требует немного другого мышления . В этом методе используется по существу противоположная процедура, если не сначала рабочий стол. Из этого следует, что он начинается с дисплея для мобильных телефонов. И знаете вы об этом или нет, но это великолепно .
Многие люди, особенно новички, не одобряют этот метод из-за его сложности для понимания. Ерунда , они просто ленивы и не хотят пересекаться.
Mobile first — это удобный метод. Он сэкономит вам много времени и, прежде всего, сильно напрягает.меньше кода, что также становится более прозрачным.
Точки останова и медиа-запросы
CSS3 позволяет нам определять условия, так называемые медиа-запросы, когда заданный стиль применяется к элементам. Мы используем точки останова, чтобы определить, с какой точки можно применить стиль. Мы покажем это прямо сейчас.
Просмотр
Чтобы иметь возможность запускать веб-страницы на мобильных устройствах, нам потребуется изменить порт просмотра . Зададим его метатегом, который вставим куда-нибудь в шапку HTML — неважно куда. По сути, он устанавливает фактический размер экрана, который интернет-браузеры на мобильных устройствах настраивают соответствующим образом.
Это то, что я считаю настройками.
Размер коробки
Мы будем использовать свойство box-sizing. Чаще всего используется со значением border-box, которое дает нам ширину элемента и включает отступы и границы. Таким образом, мы можем установить поле в 500 пикселей, добавить отступы и границу, и элемент будет наконец действительно иметь только поле в 500 пикселей.
По сравнению с
Давайте проведем небольшое сравнение.
У нас будет напряжение. какую-нибудь простенькую галерею, которая будет в две колонки для компов. Для мобильных устройств нам понадобится макет с одной колонкой. (Для простоты мы пока опустим различные поля, отступы и тому подобное.)
С помощью метода desktop first мы бы написали примерно такой код:
С помощью метода mobile first мы должны написать только этот код:
Обратите внимание, что для рабочего стола сначала мы должны сбросить несколько стилей до значения по умолчанию, которое фактически распространяется на всю страницу. Однако составить их стили достаточно сложно и поэтому у нас часто бывает дизайн с таким методомразбегаться из-за забытого стиля. Однако с мобильным первым нам не нужно ничего сбрасывать, а просто установить новые значения для рабочего стола. Для мобильного телефона опустим их.
Пример сначала для мобильных устройств
Мы покажем один пример, теперь только с методом сначала мобильные , так как в настоящее время это наиболее эффективный метод для оформления адаптивных веб-сайтов. Поэтому мы не будем рассматривать другие методы.
Давайте создадим простые стили страницы с элементами для одной статьи и двух боковых панелей.
Код HTML может выглядеть примерно так:
Код CSS с использованием сначала мобильные может выглядеть так:
Мы всегда будем стараться создавать независимые компоненты, не зависящие от конкретного элемента или позиции на HTML-странице, но это пока немного предварительно, и мы поговорим об этом подробнее в статье об объектах CSS.
На маленьком экране мы получаем следующий эффект:
Распространяется на небольших дисплеях.
И на этом экране мы получаем по-разному расположенные элементы:
Распространяется на больших дисплеях.
Гибкость
На всех адаптивных веб-сайтах, использующих первый метод для рабочего стола, вы можете увидеть несколько фиксированных значений для заголовка в каждом диапазоне @media. В методе mobile first часто используется сочетание отзывчивости и гибкости, т.е. вы не устанавливаете фиксированные значения (px, em, rem.), а используете проценты (%). Давайте поговорим об элементе.
Проще говоря: постарайтесь сделать веб-сайт гибким от самых маленьких дисплеев до самых больших. Конечно, если мы хотим фиксированные значения на сайте, то используем их.
ЗГЎвД›р
Дизайн действительно отзывчивыйПросмотр веб-страниц определенно не прогулка в парке. Поэтому старайтесь использовать эффективные способы и избегайте вещей, которые ограничивают вас и затрудняют вашу работу.
Существуют также так называемые CSS/интерфейсные фреймворки, такие как Bootstrap, который (среди прочего) может помочь вам с простым адаптивным дизайном — ищите систему сетки.
В следующем уроке, Адаптивное меню, мы создадим простое адаптивное меню, используя метод mobile-first. Давайте посмотрим, на что следует обратить внимание и как обеспечить наилучшую работу.