Адаптивный веб-дизайн - Медиа-запросы
Что такое медиа-запросы?
Медиа-запрос - это метод CSS, введенный в CSS3.
Он использует правило @media чтобы включить блок свойств CSS, только если выполняется определенное условие.
Пример
Если окно браузера имеет размер 600px или меньше, цвет фона будет светло-голубым:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Попробуйте сами »
Добавить брэкпоинт (точку перехода)
Ранее в этом учебнике мы делали веб-страницу со строками и столбцами, и она была адаптивной, но на маленьком экране она выглядела не очень хорошо.
Медиа-запросы могут помочь с этим. Мы можем добавить брэкпоинт (точку перехода), когда определенные части проекта будут вести себя по-разному на каждом брэкпоинте.
Desktop
Phone
Используйте медиа-запрос для добавления брэкпоинта на 768 пикселей:
Пример
Когда экран (окно браузера) становится меньше 768 пикселей, ширина каждого столбца должна составлять 100%:
/* Для десктопов: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;}
@media only screen and (max-width: 768px) {
/* Для мобильных телефонов: */
[class*="col-"] {
width: 100%;
}
}
Попробуйте сами »
Mobile First - Всегда первым дизайн для мобильных телефонов
Mobile First (мобильный первый) - означает проектирование для мобильных устройств до проектирования для настольного компьютера или любого другого устройства (это ускорит отображение страницы на небольших - мобильных устройствах).
Это означает, что необходимо внести некоторые изменения в CSS.
Вместо изменения стилей, когда ширина становится меньше чем 768px, необходимо изменить дизайн, когда ширина становится больше чем 768px. Это сделает дизайн Mobile First:
Пример
/* Для мобильных телефонов: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width:
768px) {
/* Для десктопов: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Попробуйте сами »
Ещё другие брэкпоинты
Вы можете добавить столько брэкпоинтов, сколько необходимо.
Можно вставить брэкпоинт между планшетами и мобильными телефонами.
Десктоп
Планшет
Телефон
Это можно сделать, добавив ещё один медиа-запрос (с разрешением 600 пикселей) и набор новых классов для устройств размером более 600 пикселей (но меньше 768 пикселей):
Пример
Обратите внимание, что два набора классов практически идентичны, единственное отличие заключается в названии (col- и col-s-):
/* Для мобильных телефонов: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* Для планшетов: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width:
768px) {
/* Для десктопов: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Может показаться странным, что у нас есть два набора идентичных классов, но это даёт нам возможность в HTML решать, что будет происходить со столбцами на каждом брэкпоинте:
HTML Пример
Для десктопа:
Первый и третий разделы будут занимать по 3 столбца каждый. Средняя часть будет охватывать 6 столбцов.
Для планшетов:
Первый раздел будет охватывать 3 столбца, второй - 9, а третий раздел будет отображаться под первыми двумя разделами и 12 столбцами:
<div class="row">
<div class="col-3 col-s-3">...</div>
<div
class="col-6 col-s-9">...</div>
<div
class="col-3 col-s-12">...</div>
</div>
Попробуйте сами »
Типичные брэкпоинты устройств
Существует множество экранов и устройств различной высоты и ширины, поэтому сложно создать точный брэкпоинт для каждого устройства. Для простоты вы можете выбрать пять групп:
Пример
/*
Экстра маленькие устройства (телефоны, 600px и ниже) */
@media only screen and (max-width: 600px)
{...}
/* Маленькие устройства (портретные планшеты и большие телефоны, 600px и выше)
*/
@media only screen and (min-width: 600px) {...}
/* Средние устройства (альбомные планшеты, 768px и выше) */
@media only screen and (min-width: 768px) {...}
/* Большие устройства (ноутбуки / десктопы, 992px и выше)
*/
@media only screen and (min-width: 992px) {...}
/* Очень большие устройства (большие ноутбуки и десктопы, 1200px и выше) */
@media only screen and (min-width: 1200px) {...}
Попробуйте сами »
Ориентация: Портрет / Альбом
Медиа-запросы также можно использовать для изменения макета страницы в зависимости от ориентации браузера.
У вас может быть набор CSS свойств, которые будут применяться только тогда, когда окно браузера шире его высоты, так называемая "альбомная" ориентация:
Пример
Веб-страница будет иметь светло-синий фон ориентации в альбомном режиме:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
Попробуйте сами »
Скрыть элементы с медиа-запросами
Другое распространенное использование медиа-запросов - скрытие элементов на экранах разных размеров:
Пример
/* Если размер экрана составляет 600 пикселей в ширину или меньше, скрыть элемент */
@media
only screen and (max-width: 600px) {
div.example {
display: none;
}
}
Попробуйте сами »
Изменить размер шрифта с помощью медиа-запросов
Вы также можете использовать медиа-запросы для изменения размера шрифта элемента на экранах разных размеров:
Переменный размер шрифта.
Пример
/* Если размер экрана составляет 601 пикселей или более, установите размер шрифта для <div> на 80px */
@media only screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* Если размер экрана 600px или меньше, установите размер шрифта для <div> на 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Попробуйте сами »
CSS Справочник @media
Для полного обзора всех типов медиа и функций / выражений, пожалуйста, посмотрите на @media правила в CSS справочнике на нашем сайте W3Schools на русском.
