Chrome

Question

当我在Google Chrome上调整浏览器屏幕大小时（我还没有在其他浏览器上尝试过），显示的值是错误的。当我必须使用媒体查询时，这使我的工作更加困难。我无法找到任何答案。即使问题仅限于Chrome，我也想知道为什么会这样。

与

不匹配

@media screen and (max-width: 1067px) {
    //do something
}

例如。

编辑：当我调整屏幕大小以查看我的布局是否以某个宽度打破并选择显示在我的媒体查询中使用的宽度时，查询不会在该浏览器宽度上运行，但如果我放置200像素以上的东西它会起作用但我失去了精确度。

使用前面的例子：

假设这不是谷歌网站，是我的网站，并且在这个宽度（1067px）我需要居中一个div。

如果我尝试：

@media screen and (max-width: 1067px) {
    margin: 0 auto;
}

它不会在指定值（1067px）下工作，但是如果我放置像max-width这样的东西：1267px会起作用但会失去精度。

我不确切地知道px中有多少变化，但大约是200px。

div中心的例子只有 一个例子，事实是：在1067px的查询中没有指定任何工作，如果我进一步减少会起作用，但为时已晚，迫使我增加1067px到1267px可以在我想要的时候运行。

重要提示：除Chrome之外，我还没有尝试过其他浏览器。

Answer 1

@media screen and (max-width: 1067px) {
    //do something
}

我想我不太了解你的问题，但我会解释@media是如何工作的。

如果你的屏幕宽度为0到1067，它将与@media屏幕内的css一起使用。它并不意味着它会将屏幕限制为某个值，您必须将页面设置为最大宽度为1067px。

像这样（在div＆＃39;和其他元素上使用max-width）：

<div id="home>
//content
</div>

你的CSS会是这样的：

#home
{
   max-width: 1067px;
}

希望有帮助！