CSS-@media标记未覆盖较小的最大宽度

Question

我正在创建一个小型react应用程序，但遇到了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)和它的对应产品，但它的性能仍然不如预期。

我确信我的理解有差距——有人能指出我做错了什么吗？

Answer 1

您没有发布太多代码，但根据您发布的内容，我认为您需要在两行的"only screen"one_answers"(max-width:…("之间添加单词"and"：

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

来自MDN:

和运算符用于组合多种媒体功能合并为单个媒体查询，要求每个链接的功能返回true以使查询为true。它还用于将媒体功能与媒体类型结合起来。

-->您在此处组合了screen和max-width。使用"one_answers"将两者结合使用。