Блог

Главная - Вопросы по программированию - Медиа-Запрос Странное Поведение

Медиа-Запрос Странное Поведение

#html #css #media-queries

Вопрос:

Я возился с редактором W3, изучая медиа-запросы. Я пытаюсь понять, почему фон всегда синий, за исключением нижней границы ширины. Насколько я понимаю, по крайней мере одна особенность всегда верна, поэтому после инвертирования она всегда должна быть желтой. Однако это не так, и он становится желтым только тогда, когда окно просмотра

Кто-нибудь знает, почему это так?

 `<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
  background-color: yellow;
}

@media not screen and (max-width: 600px) , (min-width: 500px) {
  body {
    background-color: lightblue;
  }
}
</style>
</head>
<body>

<h1>The @media Rule</h1>

<p>Resize the browser window. When the width of this document is 600 pixels or less, the background-color is "lightblue", otherwise it is "yellow".</p>

</body>
</html>
`

Ответ №1:

Поведение кажется правильным.

«Не экран» относится только к первому условию, частью которого он является, он не влияет на второе условие (минимальная ширина), поэтому максимальная ширина игнорируется, потому что мы находимся на экране, и минимальная ширина соблюдается.

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

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

 @media not screen and (max-width: 600px) , not screen (min-width: 500px) {
  body {
    background-color: lightblue;
  }
}

Комментарии:

1. спасибо, что прояснили это, я думал, что » нет » применимо к обоим

Метки: