Как настроить дисплей на windows 10 1920×1080

Урок 2. Адаптивный веб-дизайн с использованием медиазапросов в CSS 3

В последнем уроке «Введение в адаптивный веб-дизайн» мы познакомились с адаптивным веб-дизайном.

Сегодня мы узнаем, как использовать медиа-запросы, которые по сути являются условиями в стилях CSS, которые позволяют активировать и деактивировать различные стили в зависимости от размера экрана.

Сначала рабочий стол против первый шаг для мобильных устройств

Для адаптивного веб-дизайна можно использовать два основных подхода.

Сначала рабочий стол

Когда появляется адаптивный веб-сайт, большинство из нас представляет себе веб-сайт, созданный для настольных компьютеров, который затем будет адаптирован для мобильных устройств. Вот так он начал свой день — легко и относительно эффективно. По сути, мы создаем обычную страницу, как и раньше, и переставляем элементы в соответствии с правилами для имен ЕЎGE™ky.

Однако метод имеет одну фундаментальную проблему . Изменение макета сайта для разных устройств довольно сложно и требует переписывания больших кусков кода, а мы точно не хотим писать много кода, не так ли? Кроме того, часто возникает некорректное отображение. Вы это прекрасно знаете — что-то будет отображаться хорошо, а что-то нет — это беда.

Сначала мобильные

Mobile first – это метод создания веб-сайта, который требует немного другого мышления . В этом методе используется по существу противоположная процедура, если не сначала рабочий стол. Из этого следует, что он начинается с дисплея для мобильных телефонов. И знаете вы об этом или нет, но это великолепно .

Читайте также:  Как автоматически запускать обновление windows

Многие люди, особенно новички, не одобряют этот метод из-за его сложности для понимания. Ерунда , они просто ленивы и не хотят пересекаться.

Mobile first — это удобный метод. Он сэкономит вам много времени и, прежде всего, сильно напрягает.меньше кода, что также становится более прозрачным.

Точки останова и медиа-запросы

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

Просмотр

Чтобы иметь возможность запускать веб-страницы на мобильных устройствах, нам потребуется изменить порт просмотра . Зададим его метатегом, который вставим куда-нибудь в шапку HTML — неважно куда. По сути, он устанавливает фактический размер экрана, который интернет-браузеры на мобильных устройствах настраивают соответствующим образом.

Это то, что я считаю настройками.

Размер коробки

Мы будем использовать свойство box-sizing. Чаще всего используется со значением border-box, которое дает нам ширину элемента и включает отступы и границы. Таким образом, мы можем установить поле в 500 пикселей, добавить отступы и границу, и элемент будет наконец действительно иметь только поле в 500 пикселей.

По сравнению с

Давайте проведем небольшое сравнение.

У нас будет напряжение. какую-нибудь простенькую галерею, которая будет в две колонки для компов. Для мобильных устройств нам понадобится макет с одной колонкой. (Для простоты мы пока опустим различные поля, отступы и тому подобное.)

С помощью метода desktop first мы бы написали примерно такой код:

С помощью метода mobile first мы должны написать только этот код:

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

Читайте также:  Как на windows 10 сделать папку без имени на

Пример сначала для мобильных устройств

Мы покажем один пример, теперь только с методом сначала мобильные , так как в настоящее время это наиболее эффективный метод для оформления адаптивных веб-сайтов. Поэтому мы не будем рассматривать другие методы.

Давайте создадим простые стили страницы с элементами для одной статьи и двух боковых панелей.

Код HTML может выглядеть примерно так:

Код CSS с использованием сначала мобильные может выглядеть так:

Мы всегда будем стараться создавать независимые компоненты, не зависящие от конкретного элемента или позиции на HTML-странице, но это пока немного предварительно, и мы поговорим об этом подробнее в статье об объектах CSS.

На маленьком экране мы получаем следующий эффект:

Распространяется на небольших дисплеях.

И на этом экране мы получаем по-разному расположенные элементы:

Распространяется на больших дисплеях.

Гибкость

На всех адаптивных веб-сайтах, использующих первый метод для рабочего стола, вы можете увидеть несколько фиксированных значений для заголовка в каждом диапазоне @media. В методе mobile first часто используется сочетание отзывчивости и гибкости, т.е. вы не устанавливаете фиксированные значения (px, em, rem.), а используете проценты (%). Давайте поговорим об элементе.

Проще говоря: постарайтесь сделать веб-сайт гибким от самых маленьких дисплеев до самых больших. Конечно, если мы хотим фиксированные значения на сайте, то используем их.

ЗГЎвД›р

Дизайн действительно отзывчивыйПросмотр веб-страниц определенно не прогулка в парке. Поэтому старайтесь использовать эффективные способы и избегайте вещей, которые ограничивают вас и затрудняют вашу работу.

Существуют также так называемые CSS/интерфейсные фреймворки, такие как Bootstrap, который (среди прочего) может помочь вам с простым адаптивным дизайном — ищите систему сетки.

В следующем уроке, Адаптивное меню, мы создадим простое адаптивное меню, используя метод mobile-first. Давайте посмотрим, на что следует обратить внимание и как обеспечить наилучшую работу.

Читайте также:  Как восстановить данные пользователя windows 10
Поделиться с друзьями
ОС советы