Css media min width: CSS медиа-запросы (media queries) — ИТ Шеф

Медиа запросы CSS – @media для мобильных устройств

Заметки Web-разработчика

29 июня 2021

Просмотров: 1063

Медиа запросы (media queries) – это правила CSS, которые позволяют управлять стилями элементов в зависимости от значений технических параметров устройств. Их используются в тех случаях, когда нужно применить разные CSS-стили, для разных устройств по типу отображения (например: для принтера, монитора или смартфона), а также конкретных характеристик устройства (например: ширины окна просмотра браузера), или внешней среды (например: внешнее освещение). Иными словами, это конструкции, которые позволяют определять какие стили необходимо использовать на веб-странице, а какие нет на основании определённых условий.

Медиа запросы используют при создании адаптивного дизайна сайта.

Для создания медиа запросов используется следующий синтаксис:

@media условие {
/* стили (они будут выполняться, если устройство соответствует указанному условию)
}

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

Подключение метатега viewport к странице в большинстве случаях осуществляется так:

<meta name="viewport" content="width=device-width, initial-scale=1">

/* monitors and laptops */
@media (min-width: 1240px)  {}

/* tablet */
@media (min-width: 1024px) and (max-width: 1240px)  {}

@media (min-width: 768px) and (max-width: 1024px) {}

/* mobile */
@media (max-width: 768px) {}

/* iPad in portrait & landscape */
@media (min-device-width: 768px) and (max-device-width: 1024px)  {}

/* iPad in landscape */
@media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {}

/* iPad in portrait */
@media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {}

/* Retina iPad in portrait & landscape */
@media (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {}

/* Retina iPad in landscape */
@media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {}

/* Retina iPad in portrait */
@media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {}

/* iPad 1 & 2 in portrait & landscape */
@media (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1){}

/* iPad 1 & 2 in landscape */
@media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1)  {}

/* iPad 1 & 2 in portrait */
@media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {}

/* iPad mini in portrait & landscape */
@media (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1)  {}

/* iPad mini in landscape */
@media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1)  {}

/* iPad mini in portrait */
@media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1)  {}

/* iPhone 5 in portrait & landscape */
@media (min-device-width: 320px) and (max-device-width: 568px) {}

/* iPhone 5 in landscape */
@media (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {}

/* iPhone 5 in portrait */
@media (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {}

/* iPhone 2G-4S in portrait & landscape */
@media (min-device-width: 320px) and (max-device-width: 480px) {}

/* iPhone 2G-4S in landscape */
@media (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {}

/* iPhone 2G-4S in portrait */
@media (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {}

• Назад
• Вперед

CSS @media для мобильных, планшетов и настольных компьютеров

CSS-правило @media позволяет задать отдельные стили для элементов при просмотре сайта на разных устройствах.

1

@media тип_устройства оператор (опции) {
	...
}

CSS

Где тип_устройства может принимать следующие значения:

all	Все устройства
print	Принтеры
screen	Экраны компьютеров, планшеты, смартфоны
speech	Речевые браузеры

Операторы:

and	Логическое И
or или ,	Логическое ИЛИ
not	Логическое отрицание
only	Скрывает правило @media от старых браузеров

Опции:

aspect-ratio, min-aspect-ratio, max-aspect-ratio	Отношение ширины и высоты области просмотра
color, min-color, max-color	Количество бит на цвет для устройства
color-index, min-color-index, max-color-index	Количество цветов, которое устройство может отобразить
device-aspect-ratio, min-device-aspect-ratio, max-device-aspect-ratio	Соотношение сторон экрана
device-height, min-device-height, max-device-height	Вся доступная высота экрана
device-width, min-device-width , max-device-width	Вся доступная ширина экрана
height, min-height, max-height	Высота области просмотра
width, min-width, max-width	Ширина области просмотра
orientation	Положение экрана (landscape или portrait)
resolution, min-resolution, max-resolution	Разрешение экрана

2

iPhone 5, 5S, 5C, 5 SE

/* iPhone 5, 5S, 5C, 5 SE (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
	.
  ..
}

/* iPhone 5, 5S, 5C, 5 SE (альбомный режим) */
@media only screen and (orientation: landscape) and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
	...
}

CSS

iPhone 6, 6S, 7, 8, SE 2020

/* iPhone 6, 6S, 7, 8, SE 2020 (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) { 
	...
}

/* iPhone 6, 6S, 7, 8, SE 2020 (альбомный режим) */
@media only screen and (orientation: landscape) and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) { 
	...
}

CSS

iPhone 6+, 7+, 8+

/* iPhone 6+, 7+, 8+ (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) { 
	.  ..
}

/* iPhone 6+, 7+, 8+ (альбомный режим) */
@media only screen and (orientation: landscape) and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) { 
	...
}

CSS

iPhone X, XS, 11 Pro, 13 mini

/* iPhone X, XS, 11 Pro, 13 mini (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) { 
	...
}

/* iPhone X, XS, 11 Pro, 13 mini (альбомный режим) */
@media only screen and (orientation: landscape) and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) { 
	...
}

CSS

iPhone XS Max, XR, 11, 11 Pro Max

/* iPhone XS Max, XR, 11, 11 Pro Max (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 414px) and (max-device-height: 896px) and (-webkit-device-pixel-ratio: 3){
	. ..
}

/* iPhone XS Max, XR, 11, 11 Pro Max (альбомный режим) */
@media only screen and (orientation: landscape) and (min-device-width: 414px) and (max-device-height: 896px) and (-webkit-device-pixel-ratio: 3){
	...
}

CSS

iPhone 12, 12 Pro, 13, 13 Pro

/* iPhone 12, 12 Pro, 13, 13 Pro (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 390px) and (max-device-height: 844px) and (-webkit-device-pixel-ratio: 3){
	...
}

/* iPhone 12, 12 Pro, 13, 13 Pro (альбомный режим) */
@media only screen and (orientation: landscape) and (min-device-width: 390px) and (max-device-height: 844px) and (-webkit-device-pixel-ratio: 3){
	...
}

CSS

iPhone 12 Pro Max, 13 Pro Max

/* iPhone 12 Pro Max, 13 Pro Max (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 428px) and (max-device-height: 926px) and (-webkit-device-pixel-ratio: 3){
	. ..
}

/* iPhone 12 Pro Max, 13 Pro Max (альбомный режим) */
@media only screen and (orientation: landscape) and (min-device-width: 428px) and (max-device-height: 926px) and (-webkit-device-pixel-ratio: 3){
	...
}

CSS

Samsung Galaxy S3

/* Samsung Galaxy S3 (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 320px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 2){
	...
}

/* Samsung Galaxy S3 (альбомный режим) */
@media only screen and (orientation: landscape) and (min-device-width: 320px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 2){
	...
}

CSS

Samsung Galaxy S4

/* Samsung Galaxy S4 (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 320px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3){
	. ..
}

/* Samsung Galaxy S4 (альбомный режим) */
@media only screen and (orientation: landscape) and (min-device-width: 320px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3){
	...
}

CSS

Samsung Galaxy S5

/* Samsung Galaxy S5 (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 360px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3){
	...
}

/* Samsung Galaxy S5 (альбомный режим) */
@media only screen and (orientation: landscape) and (min-device-width: 360px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3){
	...
}

CSS

3

4

/* iPad (все) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
	...
}

/* iPad (портретный режим) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	. ..
}

/* iPad (альбомный режим) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	...
}

CSS

5

Только настольные компьютеры

/* Только десктопы */
@media (min-width: 1025px) {
	...
}

CSS

Только большие экраны

/* Только большие экраны */
@media only screen and (min-width : 1824px) {
	...
}

CSS

css — максимальная ширина против минимальной ширины

спросил 9 лет, 5 месяцев назад

Изменено 2 года, 3 месяца назад

Просмотрено 108 тысяч раз

Большинство руководств по использованию медиазапросов, которые я читаю, демонстрируют использование min-width , но я редко вижу людей, использующих максимальная ширина .

Является ли это своего рода дизайнерской тенденцией или шаблоном, почему люди используют min-width вместо max-width ?

Например, я разрабатываю сайт, начиная с мобильного и заканчивая десктопным. Я использую Foundation 4, но использую медиа-запросы для удаления различных элементов на странице и изменения исходного порядка.

Одна вещь, с которой я сталкиваюсь, — это настраиваемая навигация для любого устройства, ширина которого составляет 360 пикселей или меньше. Я хочу, чтобы у них была вертикальная навигация, а не встроенная горизонтальная. Итак, моя идея состояла в том, чтобы использовать max-width для этих устройств.

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

• css
• медиа-запросы
• zurb-foundation

1

2 Часть ответа

Часть 1: Чтобы ответить на вопрос «почему люди используют минимальную ширину вместо максимальной?»:

Это связано с проектным потоком. Как правило, с шаблонами минимальной ширины вы проектируете в первую очередь мобильные устройства. С шаблонами максимальной ширины вы проектируете в первую очередь рабочий стол.

Мобильный стиль с минимальной шириной, стиль по умолчанию — мобильный стиль. Запросы после этого затем нацелены на все более крупные экраны.

 корпус {
    /* здесь стили по умолчанию,
       таргетинг в первую очередь на мобильные устройства */
}
Экран @media и (мин. ширина: 480 пикселей) {
    /* стиль меняется, когда экран становится больше */
}
Экран @media и (мин. ширина: 800 пикселей) {
        /* И даже больше */
    }
 

И наоборот, при использовании max-width сначала используется рабочий стол, а затем добавляются запросы, чтобы сделать стили удобными для мобильных устройств

 body {
        /* здесь стили по умолчанию,
           в первую очередь нацелен на настольные компьютеры */
    }
Экран @media и (max-width:800px) {
    /* стиль меняется, когда экран становится меньше */
}
Экран @media и (максимальная ширина: 480 пикселей) {
        /* И даже меньше */
    }
 

Часть 2: Для вашей конкретной пользовательской навигации для любого устройства, ширина которого составляет 360 пикселей или меньше:

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

Если вы сделаете исключение (которое на самом деле не соответствует методам мобильного дизайна), оно будет выглядеть примерно так:

 body {
        /* здесь стили по умолчанию,
           таргетинг в первую очередь на мобильные устройства
           ТАКЖЕ покроет ширину 361 - 479 */
    }
Экран @media и (max-width:360px) {
    /* стиль ТОЛЬКО для экранов шириной 360px или меньше */
}
Экран @media и (мин. ширина: 480 пикселей) {
    /* стиль меняется, когда экран становится больше */
}
так далее...
 

0

Это действительно зависит от того, как работает ваша таблица стилей. Например:

 @media screen и (min-width:100px) {
    body { вес шрифта: полужирный; }
}
Экран @media и (мин. ширина: 200 пикселей) {
    тело {цвет:#555; }
}
 

Приведенные выше два медиа-запроса сделают шрифт body полужирным, если экран больше или равен 100 пикселей, но также сделает цвет #555 , если он больше или равен 200 пикселей;

Другой пример:

 @media screen и (max-width:100px) {
    body { вес шрифта: полужирный; }
}
Экран @media и (max-width:200px) {
    тело {цвет:#555; }
}
 

В отличие от первого примера, это делает шрифт body полужирным и цветом #555 только в том случае, если ширина экрана находится в диапазоне от 0 до 100 пикселей. Если он находится между 0px и 200px, это будет цвет #555 .

Прелесть медиа-запросов в том, что вы можете комбинировать следующие операторы:

 @media screen и (min-width:100px) и (max-width:200px) {
    body { вес шрифта: полужирный; цвет:#555; }
}
 

В этом примере вы ориентируетесь только на устройства шириной от 100 до 200 пикселей — ни больше, ни меньше.

Короче говоря, если вы хотите, чтобы ваши стили пропускали из медиа-запросов, вы должны использовать либо min-width , либо max-width , но если вы хотите повлиять на очень специфические критерии, можно просто совместить два.

6

Короче говоря, min-width — это 1-й подход для мобильных устройств, max-width — 1-й подход для настольных компьютеров.

Минимальная ширина — это минимальная ширина, при которой стиль НАЧИНАЕТ применяться. (Для правильной работы необходимо заказать от меньшего к большему, сначала обычные стили). Иными словами: если ширина устройства больше или равна…, примените определенные стили. С минимальной шириной стили НАЧАЮТ и продолжают работать до тех пор, пока соблюдается минимальная ширина, а максимальная ширина не указана.

Максимальная ширина — это максимальная ширина, при которой стиль продолжает применяться. После этого стиль перестанет применяться. (Для правильной работы необходимо заказать от большего к меньшему, сначала обычные стили). Иными словами: если ширина устройства меньше или равна…, примените определенные стили. Стили останавливаются, как только достигается ширина, превышающая максимальную ширину.

Наконец, это зависит от того, как вы хотите реализовать. Не существует ОДНОГО ПРАВИЛЬНОГО решения, как могут утверждать некоторые. По моему мнению, min-width прекрасно работает, когда вы начинаете с нуля, но max-width часто имеет больше смысла при модернизации существующего веб-сайта.

Что такое подходы Mobile-first и Desktop-first?

A mobile first Подход к стилю означает, что стили сначала применяются к мобильным устройствам. Расширенные стили и другие переопределения для больших экранов затем добавляются в таблицу стилей с помощью медиа-запросов.

Этот подход использует

мин-ширина

медиазапросы.

Вот краткий пример:

 // Это применимо от 0 до 600 пикселей.
тело {
  фон: красный;
}
// Это применимо начиная с 600 пикселей
@media (минимальная ширина: 600 пикселей) {
  тело {
    фон: зеленый;
  }
}
 

В приведенном выше примере будет иметь красный фон ниже 600 пикселей. Его фон меняется на зеленый при разрешении 600 пикселей и выше.

С другой стороны, подход «сначала настольные компьютеры» к стилям означает, что стили сначала применяются к настольным устройствам. Расширенные стили и переопределения для небольших экранов затем добавляются в таблицу стилей с помощью медиа-запросов. Этот подход использует > max-width медиа-запросы.

Вот краткий пример:

 // Это применимо от 600 пикселей и выше. 
тело {
  фон: зеленый;
}
// Это применимо от 0px до 600px
@media (максимальная ширина: 600 пикселей) {
  тело {
    фон: красный;
  }
}
 

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

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

Технически, min-width является «сначала мобильным» в том смысле, что вы обычно начинаете разработку для мобильных устройств и добавляете больше сложности по мере увеличения разрешения.

Тем не менее, этот термин стал более популярным из-за своего альтернативного значения, которое, как правило, означает большее внимание к мобильным усилиям и расстановке приоритетов (в основном подпитываемое клиентами или руководством, которые не понимают технических выводов). Вероятно, поэтому вы в конечном итоге видите много примеров min-width онлайн (модные блоггеры, пишущие на модные темы).

Когда я работаю со сложным дизайном рабочего стола, лично мне легче писать max-width запросов, так сказать, «упростить уравнение». Но использование запросов max-width не мешает вам сосредоточиться на мобильных устройствах и по-прежнему может быть частью стратегии «сначала мобильные».

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

И последнее замечание: использование меньшего количества запросов, когда это возможно, является идеальным. Этого можно достичь с помощью хорошего адаптивного дизайна.

1

Сначала у меня был неотвечающий веб-сайт, предназначенный для настольных компьютеров. Затем добавили отзывчивость, добавив медиа-запросы максимальной ширины.

На моем сайте теперь есть макеты для устройств с разрешением 320 пикселей, 480 пикселей, 768 пикселей, 960 пикселей, 1024 пикселей и т. д., поэтому я добавил медиа-запросы, которые выглядят следующим образом: max-width: 959px и т.д. Это нормально работает — сайт ведет себя как надо.

Однако недавно я обнаружил, что в Chrome Developer Tools «Device Mode» есть инструмент Media Queries Tool, который мне очень и очень полезен. Это позволяет мне щелкнуть, чтобы отобразить веб-сайт на каждом уровне медиа-запроса, который Chrome находит на моей странице. Это очень помогает мне при разработке адаптивных макетов.

Инструмент медиа-запросов использует числа, которые он находит в медиа-запросах, т.е. 479, 767, 959, 1023 и т. д. Но это означает, что, например, если я хочу посмотреть, как выглядит мой макет для устройства шириной 480 пикселей , я должен щелкнуть медиа-запрос уровня максимальной ширины 767 пикселей, что для меня довольно неинтуитивно.

Это заставило меня переосмыслить мой текущий CSS для настольных компьютеров, и я буду переписывать свой CSS, используя подход, ориентированный на мобильные устройства.

Я думаю, что CSS для мобильных устройств, использующий min-width , будет намного читабельнее, потому что вы увидите медиа-запрос для min-width: 480px и знаете, что это будет CSS для устройства шириной 480px.

Большинство сайтов, над которыми я работал, в первую очередь предназначены для настольных компьютеров, и в этих случаях имеет смысл использовать запросы max-width . Как правило, если вы запускаете маленький экран, сначала используйте min-width , а затем добавьте медиа-запросы, ориентированные на большее разрешение.

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

Возможно, стоит взглянуть на использование min-device-width для конкретной проблемы с навигацией

1

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Css Media не соответствует минимальной ширине с примерами кода

Css Media не соответствует минимальной ширине с примерами кода

На этом занятии мы попытаемся решить головоломку Css Media Not Min-Width, используя компьютерный язык. Следующий код служит для иллюстрации этого момента.

 @media не экран и (минимальная ширина: 400px)
 

Мы объяснили, как решить проблему Css Media Not Min-Width, используя множество примеров из реального мира.

Как изменить ширину медиа-запроса?

Установка определенного «диапазона ширины» ничем не отличается от способа создания медиа-запросов. Единственная разница заключается в добавлении большего количества выражений медиа-функций (то есть размеров ширины экрана). Взгляните: @media only screen and (min-width: 360px) и (max-width: 768px) { // делаем что-то в этом диапазоне ширины. }06 апреля 2021 г.

Как установить медиа-запрос между минимумом и максимумом?

Объединение выражений медиазапроса Max-width и min-width можно использовать вместе для таргетинга на определенный диапазон размеров экрана. @media only screen and (max-width: 600px) и (min-width: 400px) {} Приведенный выше запрос сработает только для экранов шириной 600-400px.

Что делает @media в CSS?

Ат-правило @media CSS можно использовать для применения части таблицы стилей на основе результата одного или нескольких медиа-запросов. С его помощью вы указываете медиа-запрос и блок CSS для применения к документу тогда и только тогда, когда медиа-запрос соответствует устройству, на котором используется контент. 26 сентября 2022 г.

Почему мой медиа-запрос работает неправильно?

Медиа-запрос не работает на мобильных устройствах Если медиа-запросы работают на настольных компьютерах, а не на мобильных устройствах, то, скорее всего, вы не установили область просмотра и масштаб по умолчанию. Примечание. Вам нужно добавить только одну из приведенных выше строк кода, и обычно первая выполняет эту работу.04-Feb-2021

Что лучше использовать в медиа-запросе: минимальную или максимальную ширину?

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

Следует ли использовать минимальную или максимальную ширину в медиа-запросе?

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

Что такое VW в CSS?

Полная форма VW — это ширина области просмотра. Он работает как процентная единица. Указание 10vw эквивалентно занятию 10% всей видимой ширины экрана.25 августа 2021 г.

Включает ли максимальная ширина CSS?

Поскольку «max-width» включена, ровно при 600 пикселях фон будет красным. Это может быть не так уж плохо само по себе, но если вы смешаете его с другими медиа-запросами, которые используют то же значение, что и min ( min-with: 600px ), у них будут разные точки останова.

Сколько медиа-запросов следует использовать в CSS?

Вы также можете иметь более одной точки останова для селекторов CSS.