Використання @media-запитів для адаптивних стилів
Розглянемо реальне використання всієї функціональності @media
.
@media <media_type> <operator> (<media_feature>) {
/* CSS rules */
}
<media_type>
Найтиповішим значенням типу медіа є screen
, оскільки зазвичай ми створюємо вебсторінки для пристроїв з екранами. Розглянемо, як це використовувати:
@media screen and (min-width: 768px) {
.container {
background-color: purple;
}
}
За допомогою цього правила ми повідомляємо браузеру, що якщо пристрій користувача має екран і його ширина становить 768px або більше, то елемент із класом container
матиме властивість background-color
зі значенням purple
.
Вказуємо ширину екрана, для якої хочемо задати певні css правила. Розглянемо наступні приклади:
/* 1st example */
@media screen and (max-width: 1200px) {
.container {
color: aliceblue;
}
}
/* 2nd example */
@media screen and (min-width: 1680px) {
.container {
color: gainsboro;
}
}
У першому прикладі ми повідомляємо браузеру, що для будь-яких пристроїв із шириною екрана меншою або рівною 1200px, до елемента з класом color
застосовується властивість aliceblue
зі значенням container
.
У другому прикладі ми інформуємо браузер, що якщо ширина екрана будь-якого пристрою перевищує або дорівнює 1680px, до елемента з класом color
застосовується властивість gainsboro
зі значенням container
.
Оператори є необов'язковими та вказуються між типом медіа та медіа-фічею.
and
повідомляє браузеру, що всі зазначені умови мають бути виконані.
@media screen and (min-width: 380px) and (max-width: 840px) {
.link {
text-decoration: overline;
}
}
Це правило повідомляє браузеру, що елемент із класом link
повинен мати властивість text-decoration
зі значенням overline
лише якщо користувач має пристрій із екраном ТА ширина екрана дорівнює або перевищує 380px ТА ширина екрана дорівнює або менша за 840px.
Використовуючи оператор ,
, можна вказати групу виразів, при виконанні будь-якого з яких буде застосовано медіа-запит.
@media screen and (min-width: 960px), (max-width: 540px) {
.link {
text-decoration: overline;
}
}
За допомогою цього правила браузеру повідомляється, що елемент із класом link
повинен мати властивість text-decoration
зі значенням overline
, якщо ширина екрана користувача перевищує або дорівнює 960px АБО ширина екрана менша або дорівнює 540px.
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Can you explain more about other media types besides 'screen'?
What are some common use cases for combining multiple media features?
How do I choose between using 'and' and ',' operators in media queries?
Awesome!
Completion rate improved to 2.04
Використання @media-запитів для адаптивних стилів
Свайпніть щоб показати меню
Розглянемо реальне використання всієї функціональності @media
.
@media <media_type> <operator> (<media_feature>) {
/* CSS rules */
}
<media_type>
Найтиповішим значенням типу медіа є screen
, оскільки зазвичай ми створюємо вебсторінки для пристроїв з екранами. Розглянемо, як це використовувати:
@media screen and (min-width: 768px) {
.container {
background-color: purple;
}
}
За допомогою цього правила ми повідомляємо браузеру, що якщо пристрій користувача має екран і його ширина становить 768px або більше, то елемент із класом container
матиме властивість background-color
зі значенням purple
.
Вказуємо ширину екрана, для якої хочемо задати певні css правила. Розглянемо наступні приклади:
/* 1st example */
@media screen and (max-width: 1200px) {
.container {
color: aliceblue;
}
}
/* 2nd example */
@media screen and (min-width: 1680px) {
.container {
color: gainsboro;
}
}
У першому прикладі ми повідомляємо браузеру, що для будь-яких пристроїв із шириною екрана меншою або рівною 1200px, до елемента з класом color
застосовується властивість aliceblue
зі значенням container
.
У другому прикладі ми інформуємо браузер, що якщо ширина екрана будь-якого пристрою перевищує або дорівнює 1680px, до елемента з класом color
застосовується властивість gainsboro
зі значенням container
.
Оператори є необов'язковими та вказуються між типом медіа та медіа-фічею.
and
повідомляє браузеру, що всі зазначені умови мають бути виконані.
@media screen and (min-width: 380px) and (max-width: 840px) {
.link {
text-decoration: overline;
}
}
Це правило повідомляє браузеру, що елемент із класом link
повинен мати властивість text-decoration
зі значенням overline
лише якщо користувач має пристрій із екраном ТА ширина екрана дорівнює або перевищує 380px ТА ширина екрана дорівнює або менша за 840px.
Використовуючи оператор ,
, можна вказати групу виразів, при виконанні будь-якого з яких буде застосовано медіа-запит.
@media screen and (min-width: 960px), (max-width: 540px) {
.link {
text-decoration: overline;
}
}
За допомогою цього правила браузеру повідомляється, що елемент із класом link
повинен мати властивість text-decoration
зі значенням overline
, якщо ширина екрана користувача перевищує або дорівнює 960px АБО ширина екрана менша або дорівнює 540px.
Дякуємо за ваш відгук!