@media screen CSS стиль адаптивного дизайна
Использование @media screen в CSS для создания адаптивного шаблона под компьютеры и смартфоны.
Чтобы страница могла приспосабливаться к разным размерам экранов, нужно чтобы внутри <head> было прописан тег
<meta name="viewport" content="width=device-width, initial-scale=1" >
@media and (min-width: 768px) { ... }
Размер экрана больше 768px.
@media and (max-width: 1200px) { ... }
Размер экрана меньше 1200px.
@media and (min-width: 900px) and (max-width: 1200px) { ... }
Будет выполняться при условии, что экран имеет ширину от 900 до 1200 пиксилей.
@media and (min-height: 720px) { ... }
Делает тоже самое, только с высотой экрана.
@media and screen { ... }
Только для экранов.
@media and speech, print { ... } { ... }
Только для программ чтения с экрана и для принтеров и в режиме предварительного просмотра страницы перед печатью.
@media and screen and (min-width: 1200px) and (orientation: landscape) { ... }
Будет применяться только для экрана, width >= 1200px и ориентации landscape - альбомная (горизонтальное положение).
Для портретной ориентации (вертикальное положение) используется portrait.
@media and (min-width: 544px), (orientation: portrait) { ... }
Запятая указывает, что будет выполнено одно из условий - либо width >= 544px или ориентация portrait.
/* Minimum aspect ratio */
@media (min-aspect-ratio: 9/16) {
...
}
/* Maximum aspect ratio */
@media (max-aspect-ratio: 16/9) {
...
}
/* Exact aspect ratio */
@media (aspect-ratio: 1/1) {
...
}
aspect-ratio позволяют задавать стили в зависимости от соотношения сторон viewport.