错误值的媒体查询断点答案

【问题标题】：Media Queries breakpoint at wrong value错误值的媒体查询断点
【发布时间】：2014-06-01 18:03:34
【问题描述】：

我正在开发一个响应式网站（第二次），但我最近遇到了一些问题...事实上，我所有的媒体查询断点都可以正常工作，但 值错误（比预期少 135px），例如：

.portfolio {
    display: inline-block;
    height: 400px;
}
.portfolio-item-container {
    float: left;
    height: 50%;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}
@media screen and (min-width:320px) {
    .portfolio {
        width: 638px;
    }
    .portfolio-item-container {
        width: 33%;
    }
}
@media screen and (min-width:1350px) {
    .portfolio {
        width: 850px;
    }
    .portfolio-item-container {
        width: 25%;
    }
}

这个短代码取自我的 style.css 文件，网站是一个 wordpress 模板，我使用 Chrome。例如，在这种情况下，断点位于 1215px 而不是所写的 1350px。我以为是因为滚动条，但我删除了它，没有任何改变......然后，我尝试了几个词（min-device-width 而不是 min-width 等）。 IE 也有同样的问题（我没有在 Mozilla 上验证）。我检查了我的重置 css，我有最新版本的 normalize.css...

我之前已经使用过这种媒体查询结构并且效果很好，它可能来自更新吗？我不知道在哪里看，有人有想法吗？

先谢谢你，

洛伊克

【问题讨论】：

这是一个奇怪的问题。您的浏览器屏幕是否放大了？还有，如果你把px换成ems，你还有同样的问题吗？
刚刚遇到同样的问题，我的缩放比例为 90%。

标签： css media-queries breakpoints

【解决方案1】：

确保您有：

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

在您页面的head 中。

【讨论】：

感谢您的快速回答。是的，它确实已经存在了......另一个想法？

【解决方案2】：

标记的答案没有解决问题。

正如 Scott Harrison 的评论中提到的那样，我确实将缩放级别重置为 100% 并且它工作正常。（最初是 110%）

【讨论】：