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) .
|