Просмотров: 11 263

Правило @media CSS для адаптации сайтов под мобильные устройства.

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

2016-02-29 08-41-27 @media - Поиск в Google – Yandex

Каким образом можно решить такую задачу?

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

Это становится возможным с помощью медиа-правил.

Синтаксис здесь следующий:

@media тип_устройства оператор (медиа_функция) { свойства_CSS }

Подробнее об этом свойстве и всех операторах, которые могут быть здесь использованы, можно почитать здесь:

http://htmlbook.ru/css/value/media

Для адаптивной верстки достаточно пока использовать следующее выражение:

@media all and (max-width : значение_в_пикселях) {
Свойства CSS
...
}

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

Давайте посмотрим на конкретном примере, каким образом работает данное правило.

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

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

Услуга верстки посадочных страниц.