CSS - тег @media не перекрывается при меньшей максимальной ширине - PullRequest
Новая
       4

CSS - тег @media не перекрывается при меньшей максимальной ширине

0 голосов
/ 03 марта 2020

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

Мой css выложен в этом общем формате 

<-->
Shared classes/properties{}
<--->

<--->
@media only screen and (max-width: 991px){}
@media only screen and (max-width: 480px){}
<--->

Проблема: при просмотре телефона (например, iPhone X) он использует классы max-width:991px вместо max-width:480px.

Ожидаемое поведение:

  • max-width:480 должен охватывать 0px-480px
  • max-width:991 должен охватывать 481px-991px

Однако в настоящее время 0px-991px использует только классы из max-width:991.

Я пытался (min-width: 0px) and (max-width: 480px) и его аналог, но он все еще не ведет себя, как ожидалось.

Я уверен, что в моем понимании есть пробел - кто-то может указать, что я делаю неправильно

1 Ответ

1 голос
/ 03 марта 2020

Вы не опубликовали много кода, но из того, что вы разместили, я бы сказал, что вам нужно добавить слова «и» между «только экран» и «(max-width: ...)» в обеих строках: 

@media only screen and (max-width: 991px){
  ...
}
@media only screen and (max-width: 480px){
  ...
}

От MDN:

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

-> Здесь вы комбинируете screen и max-width здесь. Использование «и» объединяет оба.

...