ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

CSS Продвинутый

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Флексбокс CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

RWD Введение RWD Область просмотра RWD Вид сетки RWD Медиа-запросы RWD Изображения RWD Видео RWD Фреймворки RWD Шаблоны

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

CSS3. Уроки для начинающих

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


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

Медиа-запрос - это метод 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 справочнике на нашем сайте.