我的移动媒体查询正在覆盖我的桌面样式.我该如何阻止这种情况

Question

我在整个样式表中有以下媒体查询：

@media only screen and (max-width: 1024x), only screen and (max-device-width: 1024px) and (orientation : landscape)
@media only screen and (max-width: 768px), only screen and (max-device-width: 768px) and (orientation : portrait)
@media only screen and (max-width: 320px), only screen and (max-device-width: 320px) and (orientation : portrait)

出于某种原因，320px 宽的媒体查询覆盖了我在桌面版本的正常样式。我做错了什么，我该如何解决这个问题？

Answer 1

第一个媒体查询中有一个拼写错误。您缺少"px"中的"p"。

@media only screen and (max-width: 1024px), only screen and (max-device-width: 1024px) and (orientation : landscape) {
}
@media only screen and (max-width: 768px), only screen and (max-device-width: 768px) and (orientation : portrait) {
}
@media only screen and (max-width: 320px), only screen and (max-device-width: 320px) and (orientation : portrait) {
}

http://jsfiddle.net/t4jqztmd/3/show

但是，我建议不要针对特定的设备尺寸。设备总是在变化 - 我们可以根据内容而不是特定设备大小定义媒体查询。接口在任何大小上都应该看起来不错。

在此处阅读有关此内容的更多信息

因此，也许您可以简化媒体查询，并且仅在需要时定位细节。

@media only screen and (max-width: 1024px) {}
@media only screen and (max-width: 768px) {}
@media only screen and (max-width: 320px) {}

此外，采用移动优先方法也是一种很好的做法。您可以使用 min-width 代替max-width 。您的"正常"样式（没有断点）将是移动样式。