Как добавить медиазапросы CSS?

By: Сагар Моти Категория: Веб-разработка Технологии: CSS, javascript

Медиа-запрос в CSS используется для создания отзывчивого дизайна сайта. Это означает, что перспектива страницы веб-сайта отличается от одной системы к другой в зависимости от типа экрана или носителя. Точка разрыва показывает, при каком размере ширины устройства содержимое начинает разрываться или искажаться.

Медиазапросы можно использовать для проверки многих вещей:

• Ширина и высота области просмотра
• Ширина и высота устройства
• Ориентация
• Разрешение

Медиа-запрос состоит из типа медиа, который может содержать одно или несколько выражений, которые могут быть либо истинными, либо ложными. Результат запроса действителен, если медиа соответствует типу устройства, на котором отображается отчет. если медиа запрос действителен, то применяется таблица стилей.

Синтез

@media not | only mediatype and (expression) {
// Содержание кода} 

Поддерживаемые браузеры: Ниже перечислены браузеры, поддерживаемые медиазапросами CSS :

• Chrome 21.0 и выше
• Mozilla 3.5 и выше
• Microsoft Edge 12.0
• Opera 9.0 и выше
• Internet Explorer 9.0 и выше
• Safari 4.0 и выше

Пример:

Следующий пример изменяет цвет фона на -

- темно-серый, если область просмотра имеет ширину 325 пикселей или больше

- желтый, если область просмотра имеет ширину 375 пикселей или больше

- красный, если область просмотра имеет ширину 425 пикселей или больше

- зеленый, если область просмотра имеет ширину 768 пикселей или больше

- светло-серый, если область просмотра имеет ширину 992 пикселя или больше.

Первоначально опубликовано на https://www.cryptextechnologies.com.