31 lines
2.4 KiB
Markdown
31 lines
2.4 KiB
Markdown
---
|
||
title: Media Queries
|
||
localeTitle: Запросы мультимедиа
|
||
---
|
||
#### Предлагаемое чтение:
|
||
|
||
[Использование медиа-запросов - веб-документы MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
|
||
|
||
Также см. Раздел «Ревизионные [принципы веб-дизайна](https://github.com/freeCodeCamp/freeCodeCamp/blob/staging/seed/challenges/01-responsive-web-design/responsive-web-design.json) » на бета-версии
|
||
|
||
#### Проект статьи:
|
||
|
||
Медиа-запросы - это набор правил, определяющих свойства CSS. Вы можете настроить медиа-запросы, чтобы изменить внешний вид вашего контента на основе того, как просматривается ваш контент.
|
||
|
||
Запросы СМИ могут определять внешний вид вашего контента на разных дисплеях. Некоторые примеры различных дисплеев: изображения на экране компьютера, текст в печати или веб-страницы в звукозаписывающем устройстве.
|
||
|
||
На веб-страницах некоторые элементы могут не отображаться последовательно в разных размерах экрана. Вы можете использовать медиа-запросы для установки специальных правил для небольших и больших экранов.
|
||
|
||
Ниже приведен пример медиа-запроса, который устанавливает размер основного текста на экране телефона:
|
||
|
||
```css
|
||
@media screen and (max-width: 450px) {
|
||
body {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
```
|
||
|
||
Этот медиа-запрос предусматривает, что для размеров экрана до 450 пикселей по ширине основной текст должен отображаться с размером шрифта 12 пикселей.
|
||
|
||
Запросы в средствах массовой информации могут быть полезны при [быстром веб-дизайне](https://guide.freecodecamp.org/html/responsive-web-design) . |