CSS - @media 标签不会覆盖较小的最大宽度答案

【问题标题】：CSS - @media tag not overriding on smaller max widthCSS - @media 标签不会覆盖较小的最大宽度
【发布时间】：2020-06-15 06:47:12
【问题描述】：

我正在创建一个小型 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。

预期的行为是：

但目前，0px-991px 仅使用来自max-width:991 的类。

我已经尝试过 (min-width: 0px) and (max-width: 480px) 及其对应项，但它的行为仍然不如预期。

我确定我的理解存在差距 - 有人可以指出我做错了什么吗？

【问题讨论】：

这能回答你的问题吗？ Using multiple @media (max-width) CSS
iPhone X 的最大宽度大于480px，这就是它使用来自991px 的样式的原因。 iPhone 的最大尺寸是812px:yesviz.com/devices/iphonex - 如果要在纵向或横向模式下应用样式，则需要指定设备方向。
媒体标签不看视口吗？不是分辨率？在这种情况下 - 您的链接会验证这一点。
@HereticMonkey 我以前也试过，但没有运气
@JakeOwen 不，查看手机的正确媒体查询。 @media only screen and (min-width: 375px) and (max-width: 767px) { /* Your Styles... */ }

【解决方案1】：

您没有发布太多代码，但是根据您发布的内容，我想说您需要在两行中的“仅屏幕”和“（最大宽度：...）”之间添加“和”一词：

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

来自 MDN：

and 运算符用于组合多种媒体功能一起成为一个媒体查询，要求每个链接的功能返回 true 以使查询为 true。它也用于将媒体功能与媒体类型相结合。

--> 您在此处组合screen 和max-width。使用“and”将两者结合起来。

【讨论】：