Як ви використовуєте @media у CSS?

@media CSS at-rule можна використовувати для застосування частини таблиці стилів на основі результатів одного чи кількох медіа-запитів. З його допомогою ви вказуєте медіа-запит і блок CSS для застосування до документа тоді і тільки якщо медіа-запит відповідає пристрою, на якому використовується вміст.

Правило @media таке використовується в медіа-запитах для застосування різних стилів для різних типів/пристроїв медіа. Медіа-запити можна використовувати для перевірки багатьох речей, наприклад: ширини та висоти вікна перегляду. ширина і висота пристрою.

Медіа-запит CSS дає вам можливість застосувати CSS лише тоді, коли середовище браузера та пристрою відповідає встановленому вами правилу, наприклад "окно перегляду ширше за 480 пікселів".

Ви можете використовувати медіа-запити трьома способами:

1. У CSS. Ви можете визначити значення атрибутів залежно від заданих умов: екран лише @media та (максимальна ширина: 480 пікселів) {стилі} …
2. У правилі @import у CSS. Ви можете імпортувати з CSS файл, який відповідає умові: @import url(example.css) not screen and (min-width: 480px)
3. У HTML.

Фактичний медіа-запит – @media. «Умови» додаються до медіа-запиту за допомогою слова screen. тому @media screen вказує медіа-запиту застосовувати екрани (або будь-які інші умови). @media screen, наприклад, і (max-width: 360px) відображатимуться лише на моніторах із максимальною шириною 360px.

Ви можете використовувати правило CSS @media at установіть різні стилі для вашої веб-сторінки, коли вона надрукована на папері чи у форматі PDF, а коли вона відображається на екрані. Тип друкованого носія визначає стилі для друкованого носія; ці стилі використовуватимуться лише для друкованого вмісту.