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

RedDeveloper
17.03.2022 10:25
Как добавить медиазапросы 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.

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?

20.08.2023 18:21

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

20.08.2023 17:46

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox

19.08.2023 18:39

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

19.08.2023 17:22

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!

Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️

18.08.2023 20:33

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.

Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL

14.08.2023 14:49

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.