→ Адаптивная верстка. Основные принципы

Адаптивная верстка. Основные принципы

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

Плюсы адаптивной верстки:

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

Минусы адаптивной верстки:

1
Контент, который в мобильной версии сайта большинству пользователей не нужен, делает первостепенно необходимую информацию труднодоступной, например, контактные данные внизу страницы.
2
Большой «вес» загружаемых страниц, пользователю приходится загружать страницы в полном размере чтобы увидеть лишь часть, отводенную мобильной версии сайта.

Основные принципы

С помощью адаптивной верстки, сайт будет отлично отображаться на устройствах с любым расширением экрана: ноутбуку, планшеты, смартфоны и т.д. Это достигается путем преобразования всех элементов сайта к «резиновому» виду- размер зависит от размера экрана пользователя сайта. Задается «резиновость» в процентах (width: 100%;). Для того чтобы сайт не терял свой дизайн на очень больших экранах используют ограничение растягивания (max-width: 1600px;).
Необходимо учитывать, что пользователь может зайти на сайт с устройства с очень маленьком расширении экрана, для того чтобы не потерялась читаемость сайта необходимо задавать и минимальное «сжатие» элементов (min-width: 100px;).
Также нельзя забывать про текстовую составляющую сайтов. Чтобы перенести непереносимую конструкцию используют: .break-word { word-wrap:break-word;}

Медиа-запросы

Медиа-запросы – набор правил, с помощью которых можно управлять не только «резиновостью» дизайна, но и изменять расположение блоков в зависимости от расширения экрана пользователя.

Рассмотрим простой пример:
@media screen and (max-width: 1200px) {
#sidebar {
width:30%;
float: left; }
#content {
width: 70%;
float: right; }
}
С ключевого слово @media в CSS начинается набор правил для каждого расширения экрана, а также его ориентации: “landscape” и “portrait”, если это необходимо. Затем перечисляются условия, исходя из которых, выбирается медиа-запрос, который лучше всего отобразит страничку на запрашиваемом устройстве. Условия перечисляются в круглых скобках и отделяются друг от друга помощью ключевого слова “and”. После перечисления всех условий выполнения в фигурных скобках определяется набор правил для данного медиа-запроса. Чтобы выполнился наш Медиа-запрос необходимо открыть страничку с цветного экрана (условие “screen”) и шириной не больше 1200 пикселей, тогда сайт отобразит в левой части странички, занимая 30% места, боковую колонку и в правой части основной блок, занимающий 70% пространства. Одной из отличительных особенностей медиа-запросов стоит отметить возможность изменения не только растянутости блоков, но и возможность изменения их расположения, например, если экран не больше 500px, то оба блока потеряют свойства обтекаемости и отобразятся во всю ширину экрана один за другим:
@media screen and (max-width: 500px) {
# sidebar {
width: 100%;
float: none; }
# content {
width: 100%;
float: none; }
}

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

Основные условия Медиа-запросов:

Width- ширина экрана.
Height - высота экрана.
device-width – ширина поверхности устройства.
device-height — высота поверхности устройства.
orientation — ориентация экрана (книжная или альбомная, “portrait” или “landscape” соответственно);
aspect-ratio — соотношение ширины и высоты, например, экран с соотношением 16:9 запишется так: aspect-ratio: 16/9;

Отдельно необходимо рассмотреть device-width и device-height. Например, современные смартфоны имеют расширение экрана HD и больше, но при этом, физически, сам экран маленького размера 3"- 6", и если в медиа-запросе указывать Height и Width сайт отобразится как на экране с диагональю больше 20", для того чтобы этого не происходило нужно указывать device-width и device-height.

Необходимо учитывать при формировании CSS  файла.

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

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

devicehit.ru


Теги: адаптивная верстка css html

Читайте также по теме статьи «Адаптивная верстка. Основные принципы»:


Вам будет интересно