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.
Чтобы узнать больше об адаптивном веб-дизайне, прочтите Учебник по адаптивному веб-дизайну на нашем сайте W3Schools на русском.
Пример
/* Контейнер для флексбоксов */
.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 справочнике.
Совет: Чтобы узнать больше об адаптивном веб-дизайне (как настроить таргетинг на разные устройства и экраны), используя брэкпоинты медиа-запросов, прочитайте Учебник по адаптивному веб-дизайну на нашем сайте W3Schools на русском.
