By: Сагар Моти Категория: Веб-разработка Технологии: CSS, javascript
Медиа-запрос в CSS используется для создания отзывчивого дизайна сайта. Это означает, что перспектива страницы веб-сайта отличается от одной системы к другой в зависимости от типа экрана или носителя. Точка разрыва показывает, при каком размере ширины устройствасодержимое начинает разрываться или искажаться.
Медиазапросы можно использовать для проверки многих вещей:
Медиа-запрос состоит из типа медиа, который может содержать одно или несколько выражений, которые могут быть либо истинными, либо ложными. Результат запроса действителен, если медиа соответствует типу устройства, на котором отображается отчет. если медиа запрос действителен, то применяется таблица стилей.
Синтез
@media not | only mediatype and (expression) {
// Содержание кода}
Поддерживаемые браузеры: Ниже перечислены браузеры, поддерживаемые медиазапросами CSS:
Пример:
Следующий пример изменяет цвет фона на -
- темно-серый, если область просмотра имеет ширину 325 пикселей или больше
- желтый, если область просмотра имеет ширину 375 пикселей или больше
- красный, если область просмотра имеет ширину 425 пикселей или больше
- зеленый, если область просмотра имеет ширину 768 пикселей или больше
- светло-серый, если область просмотра имеет ширину 992 пикселя или больше.
Первоначально опубликовано на https://www.cryptextechnologies.com.
20.08.2023 18:21
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".
20.08.2023 17:46
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
19.08.2023 18:39
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.
19.08.2023 17:22
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!
18.08.2023 20:33
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.
14.08.2023 14:49
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.