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

但是，我建议不要定位特定的设备尺寸。设备始终在变化 - 我们可以根据内容定义媒体查询，而不是特定的设备大小。任何规模的界面都应该看起来不错。

详细了解此here

因此，也许您可以简化媒体查询，并且只在需要时才定位特定内容。

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

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

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

采用移动优先方法也是一种好习惯。您可以使用max-width，而不是使用min-width。您的“普通”样式（没有断点）将是移动样式。

我的移动媒体查询覆盖了我的桌面样式。我怎么阻止这个？

1 个答案: