Подробное объяснение медиа (медиа-запроса) в CSS.
Подробное объяснение медиа (медиа-запроса) в CSS.

Предисловие

Медиа-запросы CSS — это функция CSS, используемая для применения различных правил стиля в зависимости от характеристик устройства или браузера.

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

Подробное описание

Вот медиа-запрос CSS для подробного описания:

базовая грамматика

Медиа-запросы используют @media Правила определены и содержат одно или несколько медиа-свойств и одно или несколько правил стиля. базовая грамматикаследующее:

Язык кода:javascript
копировать
@media media-type and (media-feature) {
  /* правила стиля */
}

в:

  • media-type Указывает тип носителя. К распространенным типам носителей относятся. all(Все устройства)、screen(экранное устройство)、print(принтер)ждать。 Если тип носителя не указан, по умолчанию используется значение all
  • media-feature выражатьмедиа-свойства,Используется для выбора правил на основе свойств устройства. стиля。 Общие медиа-свойства включают width(ширина)、height(высокий)、orientation(направление) resolution(разрешение)ждать。

медиа-свойства

  • width и height:По окну устройстваширинаивысокийвыбиратьправила стиля。
  • orientation:По оборудованиюнаправление(пейзаж или портрет)выбиратьправила стиля。
  • min-width и max-width:Установите минимальный размер окна устройстваимаксимумширинавыбиратьправила стиля。
  • min-height и max-height:Установите минимальный размер окна устройстваимаксимумвысокийвыбиратьправила стиля。
  • resolution:По оборудованиюразрешениевыбиратьправила стиля。
  • aspect-ratio:По окну устройства宽高比выбиратьправила стиля。
  • device-aspect-ratio:По устройству Экрансоотношение сторонвыбиратьправила стиля。
  • color и color-index:По оборудованиюцветицвет索引выбиратьправила стиля。

Портфель медиа-запросов

Вы можете использовать логические операторы andor и not для объединения нескольких медиа-запросов. Например:

Язык кода:javascript
копировать
/* Объедините несколько медиа-запросов */
@media screen and (min-width: 600px) and (orientation: landscape) {
  /* Здесь можно применить стили для устройств с большим экраном и альбомной ориентацией. */
}

/* or оператор */
@media (min-width: 600px), print {
  /* Примените здесь стиль, подходящий для ширины больше или равной 600 пикселей, или стиль печати. */
}

/* not оператор */
@media not screen {
  /* Здесь можно применить стили для устройств без экрана. */
}

Вложенные медиа-запросы

Вы также можете Вложенные медиа-запросы для более точного подбора правил стиля。Например:

Язык кода:javascript
копировать
@media screen {
  /* Экранправила стиля */

  @media (min-width: 600px) {
    /* большой Экранправила стиля */
  }

  @media (max-width: 600px) {
    /* Маленький Экранправила стиля */
  }
}

Медиа-запросы позволяют предоставлять адаптивные стили веб-страниц на основе характеристик различных устройств.

По размеру экрана, ориентации устройства、разрешениеждать Выбор атрибутаправила стиля,Вы можете обеспечить лучший пользовательский опыт для разных устройств.

Общие запросы СМИ

Вот несколько вариантов по общим запросам СМИ:

ширина устройства

Ширина устройства: Медиа-запросы могут выбирать подходящие стили в зависимости от ширины устройства.

Как правило, вы можете использовать min-width и max-width Указать минимальную и максимальную ширину устройства.

Например:

Язык кода:javascript
копировать
/* Устройства с маленьким экраном, ширина менее 600 пикселей. */
@media screen and (max-width: 600px) {
  /* Здесь можно применить стили, удобные для маленьких экранов. */
}

/* Устройства с большим экраном, ширина которого больше или равна 1200 пикселей. */
@media screen and (min-width: 1200px) {
  /* Здесь можно применить стили, подходящие для больших экранов. */
}

ориентация устройства

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

Вы можете использовать orientation Свойство задает ориентацию устройства.

Например:

Язык кода:javascript
копировать
/* ландшафтное устройство */
@media screen and (orientation: landscape) {
  /* Подайте заявку здесь на ландшафтное устройствостиль */
}

/* портретное устройство */
@media screen and (orientation: portrait) {
  /* Подайте заявку здесь на портретное устройствостиль */
}

разрешение

Разрешение: Медиа-запросы могут выбирать стили в зависимости от разрешения устройства.

Вы можете использовать min-resolution и max-resolution Чтобы установить минимальное и максимальное разрешение устройства.

Например:

Язык кода:javascript
копировать
/* Оборудование высокого разрешения, разрешение больше или равно 2x */
@media screen and (min-resolution: 2dppx) {
  /* Здесь можно применить стили, подходящие для устройств с высоким разрешением. */
}

/* Оборудование низкого разрешения, разрешение менее 1,5x. */
@media screen and (max-resolution: 1.5dppx) {
  /* Здесь можно применить стили, подходящие для устройств с низким разрешением. */
}

Это всего лишь несколько примеров выбора медиа-запроса. Вы можете выбрать подходящий медиа-запрос в зависимости от потребностей вашего проекта и целевой аудитории.

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

Проект реального боя

здесьиспользоватьзапросы СМИиCSS-переменныеобъединитьиспользовать。

Язык кода:javascript
копировать
/* Стиль применяется, когда ширина экрана меньше 900 пикселей. */
@media (max-width: 900px) {
    :root {
        --content-width:100%;
    }
}

@media (min-width: 900px) and (max-width: 1200px) {
    :root {
        --content-width:900px;
    }
}

/* Стиль применяется, когда ширина экрана превышает 1200 пикселей. */
@media (min-width: 1200px) {
    :root {
        --content-width:1200px;
    }
}

использовать

Язык кода:javascript
копировать
width: var(--content-width);
boy illustration
Углубленный анализ переполнения памяти CUDA: OutOfMemoryError: CUDA не хватает памяти. Попыталась выделить 3,21 Ги Б (GPU 0; всего 8,00 Ги Б).
boy illustration
[Решено] ошибка установки conda. Среда решения: не удалось выполнить первоначальное зависание. Повторная попытка с помощью файла (графическое руководство).
boy illustration
Прочитайте нейросетевую модель Трансформера в одной статье
boy illustration
.ART Теплые зимние предложения уже открыты
boy illustration
Сравнительная таблица описания кодов ошибок Amap
boy illustration
Уведомление о последних правилах Points Mall в декабре 2022 года.
boy illustration
Даже новички могут быстро приступить к работе с легким сервером приложений.
boy illustration
Взгляд на RSAC 2024|Защита конфиденциальности в эпоху больших моделей
boy illustration
Вы используете ИИ каждый день и до сих пор не знаете, как ИИ дает обратную связь? Одна статья для понимания реализации в коде Python общих функций потерь генеративных моделей + анализ принципов расчета.
boy illustration
Используйте (внутренний) почтовый ящик для образовательных учреждений, чтобы использовать Microsoft Family Bucket (1T дискового пространства на одном диске и версию Office 365 для образовательных учреждений)
boy illustration
Руководство по началу работы с оперативным проектом (7) Практическое сочетание оперативного письма — оперативного письма на основе интеллектуальной системы вопросов и ответов службы поддержки клиентов
boy illustration
[docker] Версия сервера «Чтение 3» — создайте свою собственную программу чтения веб-текста
boy illustration
Обзор Cloud-init и этапы создания в рамках PVE
boy illustration
Корпоративные пользователи используют пакет регистрационных ресурсов для регистрации ICP для веб-сайта и активации оплаты WeChat H5 (с кодом платежного узла версии API V3)
boy illustration
Подробное объяснение таких показателей производительности с высоким уровнем параллелизма, как QPS, TPS, RT и пропускная способность.
boy illustration
Удачи в конкурсе Python Essay Challenge, станьте первым, кто испытает новую функцию сообщества [Запускать блоки кода онлайн] и выиграйте множество изысканных подарков!
boy illustration
[Техническая посадка травы] Кровавая рвота и отделка позволяют вам необычным образом ощипывать гусиные перья! Не распространяйте информацию! ! !
boy illustration
[Официальное ограниченное по времени мероприятие] Сейчас ноябрь, напишите и получите приз
boy illustration
Прочтите это в одной статье: Учебник для няни по созданию сервера Huanshou Parlu на базе CVM-сервера.
boy illustration
Cloud Native | Что такое CRD (настраиваемые определения ресурсов) в K8s?
boy illustration
Как использовать Cloudflare CDN для настройки узла (CF самостоятельно выбирает IP) Гонконг, Китай/Азия узел/сводка и рекомендации внутреннего высокоскоростного IP-сегмента
boy illustration
Дополнительные правила вознаграждения амбассадоров акции в марте 2023 г.
boy illustration
Можно ли открыть частный сервер Phantom Beast Palu одним щелчком мыши? Супер простой урок для начинающих! (Прилагается метод обновления сервера)
boy illustration
[Играйте с Phantom Beast Palu] Обновите игровой сервер Phantom Beast Pallu одним щелчком мыши
boy illustration
Maotouhu делится: последний доступный внутри страны адрес склада исходного образа Docker 2024 года (обновлено 1 декабря)
boy illustration
Кодирование Base64 в MultipartFile
boy illustration
5 точек расширения SpringBoot, супер практично!
boy illustration
Глубокое понимание сопоставления индексов Elasticsearch.
boy illustration
15 рекомендуемых платформ разработки с нулевым кодом корпоративного уровня. Всегда найдется та, которая вам понравится.
boy illustration
Аннотация EasyExcel позволяет экспортировать с сохранением двух десятичных знаков.