54 lines
3.6 KiB
Markdown
54 lines
3.6 KiB
Markdown
---
|
||
title: CSS3 Media Queries
|
||
localeTitle: Запросы мультимедиа CSS3
|
||
---
|
||
## Запросы мультимедиа CSS3
|
||
|
||
Медиа-запросы позволяют создавать разные стили для разных устройств / размеров экрана. Их введение в CSS3 значительно облегчило строительство чувствительных веб-страниц.
|
||
|
||
Лучший подход при разработке отзывчивого веб-сайта - сначала подумать о мобильном телефоне; это означает, что вы создаете свою страницу, начиная с дизайна и контента мобильной версии. Вы можете подумать, что с некоторыми масштабируемыми размерами (%, vw или vh) ваша страница отлично адаптируется к любому устройству. Но это не так. Может быть для некоторых очень простой дизайн, но, конечно, не для более распространенных или сложных страниц!
|
||
|
||
При разработке своей страницы для небольших устройств основное внимание будет уделено основному контенту. На большом экране вам нужно будет прочитать некоторые размеры шрифта, поля, paddings и т. д., чтобы ваш сайт был удобным и удобочитаемым, но вы также захотите / хотите добавить больше контента, те, которые вы не судили и заполнить пространство, созданное размером экрана.
|
||
|
||
Мыслительный процесс должен быть:
|
||
|
||
1. Какой контент показывать?
|
||
2. Как сделать макет?
|
||
3. Размер?
|
||
|
||
### Основной синтаксис
|
||
|
||
```css
|
||
@media only screen and (min-width: 768px) {
|
||
p {padding: 30px;}
|
||
}
|
||
```
|
||
|
||
Тэг `p` будет иметь отступы 30px, как только экран достигнет ширины min 768px.
|
||
|
||
### Синтаксис И
|
||
|
||
```css
|
||
@media only screen and (min-height: 768px) and (orientation: landscape) {
|
||
p {padding: 30px;}
|
||
}
|
||
```
|
||
|
||
Тэг `p` будет иметь отступы 30px, как только экран достигнет высоты 768px, а его ориентация будет ландшафтной.
|
||
|
||
### Синтаксис OR
|
||
|
||
```css
|
||
@media only screen and (min-width: 768px), (min-resolution: 150dpi) {
|
||
p {padding: 30px;}
|
||
}
|
||
```
|
||
|
||
Тэг `p` будет иметь отступы 30px, как только экран достигнет минимальной ширины 768 пикселей или его разрешение достигнет min 150dpi.
|
||
|
||
### Больше информации
|
||
|
||
* [MDN - медиа-запросы](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
|
||
* [Школы W3 - правило @media](https://www.w3schools.com/cssref/css3_pr_mediaquery.asp)
|
||
* [CSS Tricks Стандартные размеры устройств Atricle](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/)
|
||
* \[https://alistapart.com/article/responsive-web-design\](Ethan Marcotte A List Apart Atricle на отзывчивом веб-дизайне) |