Responsive Web Design - Media Queries
Что такое запрос носителя?
Медиа-запрос — это метод CSS, представленный в CSS3.
Он использует правило @media для включения блока свойств CSS только в том случае, если определенное условие имеет значение true.
Пример
Если окно браузера 600px или меньше, цвет фона будет lightblue:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Добавление точки останова
Ранее в этом уроке мы сделали веб-страницу со строками и колонками, и она была отзывчива, но она не выглядела хорошо на маленьком экране.
Мультимедийные запросы могут помочь в этом. Мы можем добавить точку останова, где некоторые части конструкции будут вести себя по-разному на каждой стороне точки останова.
Рабочий стол
Телефон
Используйте запрос носителя для добавления точки останова в 768px:
Пример
Когда экран (окно браузера) получает меньше, чем 768px, каждый столбец должен иметь ширину 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%;
}
}
Всегда дизайн для мобильных первых
Мобильный первый означает проектирование для мобильных перед проектированием для рабочего стола или любого другого устройства (это сделает страницу отображать быстрее на небольших устройствах).
Это означает, что мы должны внести некоторые изменения в нашем CSS.
Вместо изменения стилей, когда ширина становится меньше, чем 768px, мы должны изменить конструкцию, когда ширина становится больше, чем 768px. Это сделает нашу конструкцию передвижной сперва:
Пример
/* 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%;}
}
Другая точка останова
Можно добавить столько точек останова, сколько вам нужно.
Мы также будем вставлять точку останова между планшетами и мобильными телефонами.
Рабочий стол
Планшет
Телефон
Мы делаем это, добавив еще один медиа-запрос (на 600px), и набор новых классов для устройств больше, чем 600px (но меньше, чем 768px):
Пример
Обратите внимание, что два набора классов почти идентичны, единственным отличием является имя ( 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;
}
}
Изменение размера шрифта с помощью запросов мультимедиа
Также можно использовать запросы мультимедиа для изменения размера шрифта элемента на различных размерах экрана:
Variable Font Size.
Пример
/* 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.