2.1 Основи медіа-запитів
Медіа-запити (media queries) є одним з ключових інструментів для створення адаптивних вебсайтів. З їхньою допомогою можна адаптувати стилі під різні пристрої та розміри екранів, забезпечуючи оптимальне відображення та зручність використання. Нижче ми розглянемо основи використання медіа-запитів, їхній синтаксис, а також приклади адаптації стилів для різних екранів.
Медіа-запити використовують правило @media, яке дозволяє застосовувати певні стилі тільки за умови виконання заданих умов. Умови можуть включати розміри екрана, роздільну здатність, орієнтацію та інші параметри.
Синтаксис:
@media media-type and (media-feature) {
/* стилі */
}
Де:
media-type: тип медіа, для якого будуть застосовуватись стилі. Найчастіше використовується screenmedia-feature: особливості медіа, такі як ширина, висота, орієнтація тощо.
Приклад:
- У цьому прикладі фон сторінки стане світло-блакитним, якщо ширина екрана не перевищує 768 пікселів.
@media screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}
2.2 Типи медіа-запитів
1. Запити по ширині та висоті
Ці медіа-запити дозволяють змінювати стилі залежно від ширини та висоти вікна перегляду.
Приклади:
/* Застосувати стилі, якщо ширина екрана менша або дорівнює 768px */
@media (max-width: 768px) {
.container {
padding: 10px;
}
}
/* Застосувати стилі, якщо висота екрана більша за 800px */
@media (min-height: 800px) {
.header {
height: 150px;
}
}
2. Орієнтація (orientation)
Запити по орієнтації екрана дозволяють адаптувати стилі залежно від того, чи пристрій знаходиться у портретному (portrait) чи ландшафтному (landscape) режимі.
Приклади:
/* Застосувати стилі для портретної орієнтації */
@media (orientation: portrait) {
.sidebar {
display: none;
}
}
/* Застосувати стилі для ландшафтної орієнтації */
@media (orientation: landscape) {
.sidebar {
display: block;
}
}
3. Щільність пікселів (resolution)
Медіа-запити по щільності пікселів дозволяють адаптувати стилі для пристроїв з різною щільністю пікселів, таких як екрани Retina.
Приклади:
/* Застосувати стилі для екранів з щільністю пікселів 2x і вище */
@media (min-resolution: 2dppx) {
.high-res-image {
background-image: url('high-res-image.png');
}
}
/* Застосувати стилі для екранів з щільністю пікселів менше 2x */
@media (max-resolution: 1.99dppx) {
.high-res-image {
background-image: url('standard-res-image.png');
}
}
2.3 Комбінування медіа-запитів
Медіа-запити можуть бути об'єднані за допомогою логічних операторів and, not, і only.
Приклади
Використання оператора and:
/* Застосувати стилі для пристроїв з шириною екрана між 600px та 1200px */
@media (min-width: 600px) and (max-width: 1200px) {
.main-content {
margin: 0 auto;
width: 80%;
}
}
Використання оператора not:
/* Застосувати стилі для всіх пристроїв, окрім тих, у яких ширина екрана менше 600px */
@media not all and (max-width: 600px) {
.footer {
display: block;
}
}
Використання оператора only:
/* Застосувати стилі лише для екранів */
@media only screen and (max-width: 768px) {
.menu {
display: none;
}
}
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ