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;
}
}
Попробуйте сами »
Изменение размера шрифта с помощью медиа запросов
Вы также можете использовать медиа запросы для изменения размера шрифта элемента на различных размерах экрана:
Переменная font-size
/* Если размер экрана более 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.
Совет: Чтобы узнать больше об адаптивном веб дизайне (как настроить задание на различные устройства и экраны), используя точки остановки медиа запросов, прочитайте нашу статью Учебник Адаптивный Веб Дизайн.