@media определяем размер
Правило CSS @media можно использовать для применения части таблицы стилей на основе результатов одного или нескольких медиа-запросов по определению размеров екрана или типа устройства.
Наиболее распостраненые способы использования:
/* При максимальной ширине екрана */
@media (max-width: 900px) {
.hed-zag h2 {display:none;}
}
/* При просмотре на любых екранах и для печати */
@media screen, print (min-width: 900px) {
article {padding: 1rem 3rem;}
}
/* Вложено в другое условное правило */
@supports (display: flex) {
@media screen and (min-width: 900px) {
article {display: flex;}
}
}
По ширине екрана:
/* минимум 1200px и до бесконечности или до другого большего медиа запроса */
@media (min-width: 1200px) {
.demo {display:block;}
}
/* минимум 768px и максимум в ширину 979px) */
@media (min-width: 768px) and (max-width: 979px) {
.demo {display:block;}
}
/* от 0рх до 480px */
@media (max-width: 480px) {
.demo {display:block;}
}
@media смена картинки в самом HTML в зависимостиот ширины экрана:
<body>
<picture>
<source media="(max-width: 452px)" srcset="images/mini-mal.jpg">
<img src="images/big-mal.jpg" alt="" />
</picture>
</body>
Более подробно о смене рисунков под экран - читать
Устройства:
Типы носителей описывают общую категорию устройства. За исключением случаев использования логических операторов not или only.
all - Подходит для всех устройств.
print - Предназначен для постраничного материала и документов, просматриваемых на экране в режиме предварительного просмотра.
screen - Предназначен в первую очередь для экранов.
speech - Предназначен для речевых синтезаторов.
Больше информации - смотреть
Все медиа правила - здесь
Chrome | Edge | Firefox | Internet | Opera | Safari |
1 | Yes | 1 | 6 | 9.2 | 1.3 |
Android | Chrome | Edge | Firefox | Opera | Safari | Samsung |
1 | ? | Yes | 4 | 9 | 3.1 | ? |