3.6 KiB
| title | localeTitle |
|---|---|
| CSS3 Media Queries | Запросы мультимедиа CSS3 |
Запросы мультимедиа CSS3
Медиа-запросы позволяют создавать разные стили для разных устройств / размеров экрана. Их введение в CSS3 значительно облегчило строительство чувствительных веб-страниц.
Лучший подход при разработке отзывчивого веб-сайта - сначала подумать о мобильном телефоне; это означает, что вы создаете свою страницу, начиная с дизайна и контента мобильной версии. Вы можете подумать, что с некоторыми масштабируемыми размерами (%, vw или vh) ваша страница отлично адаптируется к любому устройству. Но это не так. Может быть для некоторых очень простой дизайн, но, конечно, не для более распространенных или сложных страниц!
При разработке своей страницы для небольших устройств основное внимание будет уделено основному контенту. На большом экране вам нужно будет прочитать некоторые размеры шрифта, поля, paddings и т. д., чтобы ваш сайт был удобным и удобочитаемым, но вы также захотите / хотите добавить больше контента, те, которые вы не судили и заполнить пространство, созданное размером экрана.
Мыслительный процесс должен быть:
- Какой контент показывать?
- Как сделать макет?
- Размер?
Основной синтаксис
@media only screen and (min-width: 768px) {
p {padding: 30px;}
}
Тэг p будет иметь отступы 30px, как только экран достигнет ширины min 768px.
Синтаксис И
@media only screen and (min-height: 768px) and (orientation: landscape) {
p {padding: 30px;}
}
Тэг p будет иметь отступы 30px, как только экран достигнет высоты 768px, а его ориентация будет ландшафтной.
Синтаксис OR
@media only screen and (min-width: 768px), (min-resolution: 150dpi) {
p {padding: 30px;}
}
Тэг p будет иметь отступы 30px, как только экран достигнет минимальной ширины 768 пикселей или его разрешение достигнет min 150dpi.
Больше информации
- MDN - медиа-запросы
- Школы W3 - правило @media
- CSS Tricks Стандартные размеры устройств Atricle
-
https://alistapart.com/article/responsive-web-design