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

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 Медиа запросы - Примеры


CSS Медиа-запросы - Больше примеров

Давайте рассмотрим еще несколько примеров использования медиа-запросов.

Медиа-запросы - это популярный метод доставки адаптивной таблицы стилей на разные устройства. Чтобы продемонстрировать простой пример, мы можем изменить цвет фона для разных устройств:

Медиа-запросы для адаптивности веб-страниц

Пример

/* Установите телесный цвет фона */
body {
  background-color: tan;
}

/* На экранах с разрешением 992 пикселей и менее установите цвет фона синий */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

/* На экранах с разрешением 600px установите цвет фона оливковый */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}
Попробуйте сами »

Вы задаетесь вопросом, почему мы используем точно 992px и 600px? Это то, что мы называем "типичными брэкпоинтами" (точки изменения) для устройств. Вы можете прочитать больше о типичных брэкпоинтах в нашем Учебнике по адаптивному веб-дизайну.


Медиа-запросы для меню

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

Пример

/* Контейнер navbar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Navbar ссылки */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* На экранах шириной 600px или меньше, сделайте ссылки меню сложенными друг на друга, а не рядом друг с другом. */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
Попробуйте сами »

Медиа-запросы для столбцов

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

Большие экраны:

 

Средние экраны:

 

Маленькие экраны:

Примеры

/* Создайте четыре равных столбца, которые плавают рядом друг с другом */
.column {
  float: left;
  width: 25%;
}

/* На экранах шириной 992 пикселя или меньше происходит переход от четырех столбцов к двум столбцам */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}

/* На экранах шириной 600px или меньше столбцы должны располагаться друг над другом, а не рядом друг с другом. */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
Попробуйте сами »

Совет: Более современный способ создания макетов столбцов заключается в использовании CSS Flexbox (см. Пример ниже). Однако это не поддерживается в Internet Explorer 10 и более ранних версиях. Если вам требуется поддержка IE6-10, используйте float (как показано выше).

Чтобы узнать больше о модуле Flexible Box Layout, прочитайте раздел CSS Flexbox.

Чтобы узнать больше об адаптивном веб-дизайне, прочтите Учебник по адаптивному веб-дизайну на нашем сайте.

Пример

/* Контейнер для флексбоксов */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Создайте четыре равных столбца */
.column {
  flex: 25%;
  padding: 20px;
}

/* На экранах шириной 992 пикселя или меньше переходите от четырех столбцов к двум столбцам */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}

/* На экранах шириной 600px или меньше столбцы должны располагаться друг над другом, а не рядом друг с другом. */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}
Попробуйте сами »

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

Другое распространенное использование медиа-запросов - скрытие элементов на экранах разных размеров:

Я буду спрятан на маленьких экранах.

Пример

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

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

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

Переменный размер шрифта.

Пример

/* Если размер экрана превышает 600 пикселей, установите размер шрифта в <div> на 80px */
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}

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

Гибкая галерея изображений

В этом примере мы используем медиазапросы вместе с flexbox для создания адаптивной галереи изображений:


Гибкий веб-сайт

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


Ориентация: Портретная (вертикальная) / Альбомная (горизонтальная)

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

У вас может быть набор свойств CSS, которые будут применяться только тогда, когда окно браузера шире его высоты, так называемая "landscape" ("альбомная") ориентация:

Пример

Используйте светло-голубой цвет фона, если ориентация в альбомном режиме:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}
Попробуйте сами »

От минимальной ширины до максимальной ширины

Вы также можете использовать (max-width: ..) and (min-width: ..) значения для установки минимальной ширины и максимальной ширины.

Например, когда ширина браузера составляет от 600 до 900 пикселей, измените внешний вид элемента <div>:

Пример

@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}
Попробуйте сами »

Используя дополнительное значение: В приведенном ниже примере мы добавляем дополнительный медиа-запрос к нашему уже существующему, используя запятую (это будет вести себя как оператор OR - или):

Пример

/* Если ширина между 600px и 900px OR (или) больше 1100px - изменить внешний вид <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}
Попробуйте сами »

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

Чтобы получить полный обзор всех типов мультимедиа и функций / выражений, ознакомьтесь с @media правилами в CSS справочнике.

Совет: Чтобы узнать больше об адаптивном веб-дизайне (как настроить таргетинг на разные устройства и экраны), используя брэкпоинты медиа-запросов, прочитайте Учебник по адаптивному веб-дизайну на нашем сайте.