Адаптивный дизайн веб-страниц - медиа-запросы

Что такое медиа-запрос?

Медиа-запросы - это технология CSS, введенная в CSS3.

Используется только при выполнении определенных условий @media Правила для ссылки на блок свойств CSS.

Пример

Если размер окна браузера составляет 600px или меньше, то цвет фона будет浅蓝色:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Попробуйте сами

Добавить брейкпоинт

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

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


desktop-компьютер

мобильный телефон

Добавьте брейкпоинт в 768px с помощью медиа-запроса:

Пример

Когда ширина экрана (окно браузера) меньше 768px, ширина каждой колонки должна быть 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) означает, что перед дизайном для стационарных компьютеров или любого другого устройства, сначала нужно спроектировать для мобильных устройств (что сделает страницу быстрее для отображения на较小ном оборудовании).

Это означает, что нам нужно сделать некоторые улучшения в CSS.

Когда ширина меньше 768px,我们应该修改设计，而不是更改宽度。我们就这样进行了“мобильный优先”的设计：

Пример

/* Для мобильных телефонов: */
[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%;}
}

Попробуйте сами

другой брейкпоинт

Вы можете добавить любое количество брейкпоинтов.

Мы также вставим брейкпоинт между планшетами и телефонами.


desktop-компьютер

планшет

мобильный телефон

Для этого мы добавили медиа-запрос (на 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>

Попробуйте сами

Типичные брейкпоинты устройств

Экраны и устройства с различной высотой и шириной不胜计数, поэтому трудно создать точные брейкпоинты для каждого устройства. Для упрощения вы можете сосредоточиться на этих пяти группах:

Пример

/* Ultra-маленькие устройства (телефон, 600px и меньше) */
@media only screen and (max-width: 600px) {...} 
/* Маленькие устройства (портативный планшет и большой телефон, 600 пикселей и выше) */
@media only screen and (min-width: 600px) {...} 
/* Средние устройства (横向 планшет, 768 пикселей и выше) */
@media only screen and (min-width: 768px) {...} 
/* Большие устройства (ноутбук/стационарный компьютер, 992px и выше) */
@media only screen and (min-width: 992px) {...} 
/* Ультра-большие устройства (большой ноутбук и стационарный компьютер, 1200px и выше) */
@media only screen and (min-width: 1200px) {...}

Попробуйте сами

Ориентация: Портrait / Ландшафт

Медиа-запросы также могут использоваться для изменения макета страницы в зависимости от ориентации браузера.

Вы можете установить набор свойств CSS, которые применяются только тогда, когда ширина окна браузера больше его высоты, то есть в так называемом "порtrait" направлении:

Пример

Если ориентация составляет横向 режим (landscape mode), то фоновый цвет веб-страницы будет светло-голубым:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Попробуйте сами

Скрытие элементов с помощью медиа-запросов

Еще одно распространенное использование медиа-запросов - скрытие элементов на различных экранах:

Пример

/* Если размер экрана составляет 600 пикселей или меньше, скройте этот элемент */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Попробуйте сами

Изменение размера шрифта с помощью медиа-запросов

Вы также можете использовать медиа-запросы для изменения размера шрифта элементов на различных экранах:

Пример

/* Если размер экрана составляет 601px или больше, установите font-size для <div> в 80px */
@media only screen and (min-width: 601px) {}}
  div.example {
    font-size: 80px;
  }
}
/* Если размер экрана составляет 600px или меньше, установите font-size для <div> в 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Попробуйте сами

Руководство по CSS @media

Полное описание всех типов медиа и свойств/выражений см. См. @media правило в руководстве по CSS.