Отзывчивый веб-дизайн — Медиа-запросы
Что такое медиазапрос?
Медиа-запрос — это метод CSS, представленный в CSS3.
Он использует @media
правило для включения блока свойств CSS, только если выполняется определенное условие.
Пример
Если окно браузера имеет размер 600 пикселей или меньше, цвет фона будет светло-голубым:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Добавить точку останова
Ранее в этом уроке мы создали веб-страницу со строками и столбцами, и она была адаптивной, но плохо выглядела на маленьком экране.
Медиа-запросы могут помочь в этом. Мы можем добавить точку останова, при которой определенные части дизайна будут вести себя по-разному по обе стороны от точки останова.
Рабочий стол
Телефон
Используйте медиа-запрос, чтобы добавить точку останова на 768px:
Пример
Когда экран (окно браузера) становится меньше 768 пикселей, каждый столбец должен иметь ширину 100%:
/* For desktop: */
.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) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
Всегда проектируйте для мобильных устройств в первую очередь
Mobile First означает проектирование для мобильных устройств до разработки для настольных компьютеров или любого другого устройства (это ускорит отображение страницы на небольших устройствах).
Это означает, что мы должны внести некоторые изменения в наш CSS.
Вместо того, чтобы менять стили, когда ширина становится меньше 768 пикселей, мы должны изменить дизайн, когда ширина становится больше 768 пикселей. Это сделает наш дизайн Mobile First:
Пример
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.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-
):
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.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) {
/* For desktop: */
.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>
Типичные точки останова устройства
Существует множество экранов и устройств разной высоты и ширины, поэтому сложно создать точную точку останова для каждого устройства. Для простоты вы можете настроить таргетинг на пять групп:
Пример
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
Ориентация: Портрет/Пейзаж
Медиа-запросы также можно использовать для изменения макета страницы в зависимости от ориентации браузера.
У вас может быть набор свойств CSS, которые будут применяться только тогда, когда окно браузера шире, чем его высота, так называемая «альбомная» ориентация:
Пример
Веб-страница будет иметь светло-голубой фон, если ориентация находится в ландшафтном режиме:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
Скрыть элементы с помощью медиа-запросов
Еще одно распространенное использование медиа-запросов — скрытие элементов на экранах разного размера:
Пример
/* If the screen size is 600px wide or less, hide the element */
@media
only screen and (max-width: 600px) {
div.example {
display: none;
}
}
Изменить размер шрифта с помощью медиа-запросов
Вы также можете использовать медиа-запросы для изменения размера шрифта элемента на разных размерах экрана:
Переменный размер шрифта.
Пример
/* If the screen size is 601px or
more, set the font-size of <div> to 80px */
@media only screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px or
less,
set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Справочник по CSS @media
Полный обзор всех типов мультимедиа и функций/выражений см. в правиле @media в нашем справочнике по CSS .