40 lines
3.2 KiB
Markdown
40 lines
3.2 KiB
Markdown
---
|
||
title: CSS3 at Media Rule
|
||
localeTitle: CSS3 в правиле СМИ
|
||
---
|
||
## CSS3 в правиле СМИ
|
||
|
||
Правило CSS3 Media является правилом, которое позволяет использовать медиа-запросы. Запросы в средствах массовой информации позволяют вам стилизовать вашу веб-страницу (либо ее часть, либо все ее) по-разному на основе разных типов или устройств.
|
||
|
||
Медиа-запрос создается с помощью тега `@media` и затем предоставляет правило для проверки таких вещей, как:
|
||
|
||
* Ширина и высота текущего окна просмотра
|
||
* Ориентация устройства (это относится к планшетам или телефонам)
|
||
* Текущее разрешение
|
||
* И больше
|
||
|
||
В настоящее время существует четыре возможных типа носителей:
|
||
|
||
* all (По умолчанию - это будет предназначено для всех устройств)
|
||
* print (Используется для принтеров, например, для отдельных стилей печати)
|
||
* экран (используется для компьютеров, телефонов, планшетов и т. д.)
|
||
* речь (используется для доступа к устройствам, таким как экранное устройство, которое повествует содержимое веб-страницы)
|
||
|
||
Запросы в СМИ используются для всех видов фиордов, поскольку они позволяют использовать многие функции мультимедиа. Одним из наиболее распространенных способов использования медиа-запроса является отрисовка веб-страницы; то есть он будет вести себя по-разному на основе размера экрана.
|
||
|
||
Пример медиа-запроса выглядит следующим образом:
|
||
|
||
```CSS
|
||
@media screen and (max-width: 1000px) {
|
||
body {
|
||
background: #000;
|
||
}
|
||
}
|
||
```
|
||
|
||
CSS в правиле Media Query применяется только в том случае, когда правило имеет значение true. Например, глядя на фрагмент выше, фон тела будет изменен на `#000` только тогда, когда пользователь посещает страницу с устройством шириной 1000 пикселей или менее. Если выше 1000px, это правило не применяется.
|
||
|
||
#### Дополнительная информация:
|
||
|
||
* [Правило CSS @media](https://www.w3schools.com/cssref/css3_pr_mediaquery.asp)
|
||
* [Использование медиа-запросов](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) |