Медиа-запросы максимальной ширины означают «до и включая»? - PullRequest
Новая
       5

Медиа-запросы максимальной ширины означают «до и включая»?

0 голосов
/ 07 декабря 2018

У меня есть основной вопрос о том, как ведут себя медиа-запросы, особенно в среде, которую я использую, а именно Joomla 3.x и ее шаблон Protostar по умолчанию.Я приведу простой пример и, надеюсь, он проиллюстрирует, где у меня проблемы.

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

@media (max-width: 979px) {
    body.site {color: red;}
}

@media (max-width: 767px) {
    body.site {color: orange;}
}

@media (max-width: 480px) {
    body.site {color: yellow;}
}

Мои ожидания от чтения множества различных источниковдля медиазапросов, как с использованием Protostar, так и без него, это будет выглядеть так:

  • От очень низкого разрешения до 480 пикселей включительно, текст будет желтым.
  • От 481 пикселей дои включая 767px будет оранжевым.
  • От 768px до 979px включительно будет красным.
  • От 980px и выше по умолчанию будет черный цвет.

Тем не менее, результат, который я видел при использовании Firefox Responsive Design Mode, выглядит так:

  • От очень низкого разрешения до 480 пикселей включительно, как я и ожидал, текст желтый.
  • От 481 пикселей до 766 пикселей включительно (не 767 пикселей) оранжевого цвета.
  • От 767 пикселей до 978 пикселей включительно (не 979 пикселей) красного цвета.
  • От 979 пикселей и выше - черный по умолчанию.

Итак, мой конфузиО том, как max-width действительно работает с диапазонами.Например, я подумал, что «max-width» всегда означает «вплоть до» указанного максимального размера области просмотра, но это не всегда было результатом.

У меня есть базовое неправильное представление о «max»-width ", или я правильно понял, но эти неожиданные (для меня) результаты связаны с точками останова по умолчанию, определенными в файле css шаблона ... или, может быть, это что-то еще?

...