Запрос информации о минимальной/максимальной ширине не делает грамматического смысла

Я нахожу понятие медиа-запроса (min-width/max-width) немного запутанным.

Естественно, если бы я должен был спроектировать медиа-запрос, я хотел бы сказать (в псевдокоде)....

if(screen.width < 420)
{
     ApplyStyle();
}

Эта концепция разговоров о min и max не имеет никакого смысла, так как "минимальная ширина" чего-то типа элемента div - это не вопрос.

Я знаю, что следующее верно, когда мой экран идет ниже 420 пикселей...

@media screen and (max-width:420px) {


}

Я просто не знаю, почему, потому что максимальная ширина - это то, что я говорю ей. Если бы я сказал, что у меня есть что-то, почему css проверяет это? Конечно, это уже известно.

Возможно, мне не хватает грамматика/контекста. Может кто-нибудь объяснить?

Ответ 1

min-width в медиа-запросах не относится к свойству min-width, которое вы устанавливаете для элементов, это две разные вещи.

В мультимедийных запросах min-width: X истинно, если область просмотра имеет ширину, большую или равную X, эффективно работающую как screen.width >= X. Очевидно, что max-width будет равно screen.width <= X

Для меня это имеет смысл, если вы читаете @media screen and (max-width:420px) как экран с максимальной шириной 420 пикселей, поэтому ничего от 0 до 420 пикселей

Ответ 2

Вот простой пример, надеюсь, это поможет.

Скажем, у нас есть сайт со следующими медиа-запросами:

/* #1- Large desktop */
@media (min-width: 980px) { ... }

/* #2- Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* #3- Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* #4- Landscape phones and down */
@media (max-width: 480px) { ... }

Если размер экрана браузера составляет 1200 пикселей, запрос № 1 будет удовлетворен, так как минимальная ширина браузера должна быть 980 пикселей для отображения этого запроса.

Давайте скажем, что теперь мы изменим размер браузера и доведем его до 250px.. запроС# 4 выполняется, поскольку MAX - 480px.

Вот простой перевод запросов.

@media (min-width: 980px) { ... }

Отобразить, если экран больше или равен 980px

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

Отображать, если экран больше или равен 768px и меньше или равен 978px

@media (max-width: 767px) { ... }

Отобразить, если экран больше 480 пикселей и меньше или равен 767 пикселей.

@media (max-width: 480px) { ... }

Отобразить, если экран меньше или равен 480px

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

Ответ 3

Путаница здесь в том, что есть и свойство min-width CSS, и медиа-запрос с тем же именем:

@media (min-width: 420px) {...} /* This is read-only and is set to screen size */

.element { min-width: 420px; ...} /* This is setting a property of the selected element */