3

我想为 1024px 到 1280px 之间的屏幕尺寸添加一些样式，所以我使用以下媒体查询：

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

我的屏幕尺寸是 1280 像素。Firefox 没有显示在上述查询中添加的任何样式（这是正确的），但在 1280px 屏幕尺寸上的 Chrome 浏览器会显示在上述媒体查询中添加的样式。

为什么 1280px 屏幕上的 Chrome 仍然显示上述媒体查询中添加的样式？我怎样才能修复上述对 Chrome 的查询？谢谢。

4

2 回答 2

4

那是 6 岁，但也许可以帮助某人：

我遇到了同样的问题，媒体查询在 edge 和 firefox 中运行良好，但在 chrome 中却不行。

至少在我的情况下，问题是我没有将视口标签放在 head/html 中：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

现在我不知道为什么该网站在 firefox/edge 中工作，实际上让找到问题变得更加困难......

于 2019-09-06T17:06:05.070 回答
2

我真的不确定您为什么会遇到媒体查询问题。也许你没有正确地设计它。

这里是强制性的 JSFiddle 

body { background: red; }  
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
    body { background: blue; }
}

我在三种不同类型的屏幕上使用 Google Chrome 对其进行了测试：
1. 宽度小于 1024px
2. 宽度在指定的 1024px 和 1279px 之间
3. 宽度大于 1279px

于 2013-07-06T17:44:58.563 回答