Question

我的HTML：

<div></div>

我的CSS：

    div {
        width: 200px;
        height: 200px;
        background: yellow;
    }

    @media (max-width: 767px) {
        div {
            background: blue;
        }
    }

如果您在Chrome或Firefox中将屏幕大小调整为767px，则颜色仍为黄色！只有当您移动到766px或更低时，颜色才会变为蓝色。这是Chrome和Firefox中的错误吗？

这是codepen：link

请帮助

编辑：附图片： enter image description here

Answer 1

来到这里因为我遇到了同样的问题。利斯特先生有正确的想法。即使您的浏览器没有缩放，也会在笔记本电脑中常用的Windows中显示设置，称为＆＃34;更改文本，应用和其他项目的大小＆＃34;。我机器上的推荐设置是125％，这可以解决一些问题。

如果您将此设置更改为100％，则应解决您的问题。也可以尝试在控制台中调用以下内容，你应该得到766。

window.innerWidth;

媒体查询最大宽度不适用于Chrome和Mozilla中的断点

1 个答案: