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

Почему в Python есть оператор "pass"?
Почему в Python есть оператор "pass"?

05.05.2023 14:00

Оператор pass в Python - это простая концепция, которую могут быстро освоить даже новички без опыта программирования.

Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом

05.05.2023 11:59

Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря своим методам, они делают код очень простым для понимания и читабельным.

JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы

05.05.2023 11:57

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний, то, не теряя времени, практикуйте наш бесплатный онлайн тест 1100+ JavaScript MCQs и развивайте свои навыки и знания.

Массив зависимостей в React
Массив зависимостей в React

05.05.2023 09:44

Все о массиве Dependency и его связи с useEffect.