САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

CSS Учебник

CSS Главная CSS Введение CSS Синтаксис CSS Инструкции CSS Цвета CSS Слои Фона CSS Границы CSS Поля CSS Отступы CSS Высота и ширина CSS Бокс модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS Дисплей CSS Макс. ширина CSS Позиция CSS Переполнение CSS Поплавок CSS Линейный блок CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS Прозрачность CSS Панель навигации CSS Выпадающий CSS Галерея CSS Спрайты CSS Атрибуты селекторов CSS Формы CSS Счетчики CSS Макет сайта CSS Еденицы измерений CSS Особенности

CSS3 Учебник

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

CSS3 Адаптивный дизайн

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

CSS Сетка

Сетка Введение Сетка Контейнер Сетка Пункт

CSS Примеры

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

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

CSS Справочник CSS Поддержка CSS Селекторы CSS Функции CSS Звук CSS Веб Шрифты CSS Анимации CSS Длины CSS PX-EM Конвертер CSS Цвета CSS Значение Цвета CSS по Умолчанию CSS Символы

СSS3 Медиа Запросы - Примеры



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

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

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

Пример

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

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

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

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


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

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

Пример

/* Контейнер навигации */
.topnav {
    overflow: hidden;
    background-color: #333;
}

/* Навигационные ссылки */
.topnav a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

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

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

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

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

 

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

 

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

Пример

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

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

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

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

Чтобы узнать больше о модулях гибких боксах макета модели, прочитайте нашу главу CSS3 Гибкий Бокс.

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

Пример

/* Контейнер для flexboxes */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Четыре равные колонки */
.column {
  flex: 25%;
  padding: 20px;
}

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

/* На экранах шириной 600 пикселей или менее столбцы укладываются друг на друга, а не рядом друг с другом */
@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;
  }
}

/* Если размер экрана 600px широкий, или меньше, установите размер шрифта <div> в 30px */
@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 до 900px, измените внешний вид элемента <div>:

Пример

@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}
Редактор кода »

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

Пример

/* Когда ширина между 600px и 900px ИЛИ выше 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.

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