CSS медиа-запросы - примеры

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

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

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

Ниже представлен пример, чтобы изменить цвет фона для различных устройств:

CSS медиа-запросы

Пример

/* Устанавливаем цвет фона body в коричневато-бежевый */
body {
  background-color: tan;
}
/* На экранах меньше или равных 992 пикселей, устанавливаем цвет фона в синий */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}
/* На экранах 600 пикселей или меньше, устанавливаем цвет фона в оливковый */
@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;
}
/* На экранах с шириной 600 пикселей или меньше, ссылки в меню должны быть расположены друг над другом, а не lado a lado */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

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

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

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

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

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

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

Пример

/* Создание четырех равных колонок, расположенных lado a lado */
.column {
  float: left;
  width: 25%;
}
/* На экранах с шириной 992 пикселей или меньше, количество колонок уменьшается с четырех до двух */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* На экранах с шириной не более 600 пикселей, колонки должны быть堆ированы, а не расположены lado a lado */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

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

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

Чтобы узнать больше о модуле эластичного макета, пожалуйста, изучите Flexbox CSS эту главу.

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

Пример

/* Контейнер для эластичного контейнера */
.row {
  display: flex;
  flex-wrap: wrap;
}
/* Создание четырех равных колонок */
.column {
  flex: 25%;
  padding: 20px;
}
/* На экранах с шириной 992 пикселей или меньше, количество колонок уменьшается с четырех до двух */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}
/* На экранах с шириной не более 600 пикселей, колонки должны быть堆ированы, а не расположены lado a lado */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}

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

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

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

На маленьких экранах я скрываю.

Пример

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

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

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

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

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

Пример

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

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

Эластичная галерея изображений

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

Пример

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

Эластичный веб-сайт

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

Пример

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

Ориентация: портрет / ландшафт

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

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

Пример

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

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

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

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

Вы также можете использовать атрибуты max-width и 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 оператора) для добавления дополнительных медиа-запросов к уже существующим:

Пример

/* При ширине экрана от 600 до 900 пикселей или более 1100 пикселей - изменить вид <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.

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