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 українською.
