Что могут означать две нижние границы для медиа-запросов? - PullRequest
Новая
       26

Что могут означать две нижние границы для медиа-запросов?

1 голос
/ 04 июля 2019

Как программист, который должен немного разбираться в дизайне, я рад, что CSS grid наконец-то обращается к моему пониманию того, каким должен быть дизайн: кратким и логичным.

Но авторитетным источники пишут: 

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

Я бы понял, установив нижнюю границу и верхнюю границу 

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

для конструктивного элемента.

Еще лучше, и с тех порразработчик имеет право (/ требуется) быть педантичным, мне было бы удобнее, если бы 

@media (min-width: 500px) { ... }
@media (max-width: 499px) { ... }

знал, что мы имеем дело с целыми числами, а не с плавающей точкой (но независимо от того, является ли минимальный эквивалент >= или >?)

Моя ссора с первым (мин: 500; мин: 700).Как это может иметь смысл?И что это значит, если это так?Имеет ли значение порядок появления медиа-запросов?

Ответы [ 2 ]

0 голосов
/ 04 июля 2019

Правила в первом медиа-запросе применяются, если ширина составляет не менее 500 пикселей.

Правила во втором медиа-запросе применяются, если ширина составляет не менее 700 пикселей.

Поскольку это можетне может быть 700 и не менее 500, если применяются правила во втором медиа-запросе, то же самое относится и к первому.

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

Имеет ли значение порядок появления медиа-запросов?

Да, в соответствии с каскадом:«Наконец, сортировка по указанному порядку: если два объявления имеют одинаковый вес, происхождение и специфику, последнее определенное выигрывает.»

CSS разработан так, чтобы вы могли создавать свои стили от общего доспецифические, переопределяющие более ранние правила по мере использования.

Предоставление правил по умолчанию, затем наложение дополнительных правил, если окно шире, и затем наложение еще больше, если оно очень широкое, является стандартным подходомach.

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

0 голосов
/ 04 июля 2019

Ничего плохого в этих параметрах запроса. 

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

Если ширина экрана равна или превышает 500 пикселей, скажем, background-color: orange. 

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

Еслиширина экрана равна или больше 700px, тогда, скажем, background-color: lightgreen.

Порядок правил CSS имеет значение, в соответствии с правилами каскада.

Используйте мое демо нижедля иллюстраций.Переключите порядок правил для лучшего понимания важности исходного порядка.

jsFiddle 

article {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: 100px;
  grid-gap: 10px;
  padding: 10px;
  background-color: gray;
}

section {
  background-color: aqua;
}

section:first-child::after {
  content: "screen width < 500px"
}

@media (min-width: 500px) {
  section {
    background-color: orange;
  }
  section:first-child::after {
    content: "screen width >= 500px"
  }
}

@media (min-width: 700px) {
  section {
    background-color: lightgreen;
  }
  section:first-child::after {
    content: "screen width >= 700px"
  }
}

@media (min-width: 900px) {
  section {
    background-color: yellow;
  }
  section:first-child::after {
    content: "screen width >= 900px"
  }
}

@media (max-width: 500px) {
  article {
    grid-template-columns: 1fr;
    grid-auto-rows: 50px;
  }
}
<article>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</article>
...