媒体查询断点值错误 [英] Media Queries breakpoint at wrong value

问题描述

我正在(第二次)在一个响应式网站上工作，但是最近遇到了问题...事实是，我所有的媒体查询断点都可以正常工作，但是错误的值(比预期少135像素)，例如:

I'm working on a responsive website (for the second time), but I'm recently meeting problems... The fact is that all of my media queries breakpoint work fine, but at wrong values (135px less than expected), for example:

.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 ...

This short code is taken from my style.css file, the website is a wordpress template and I use Chrome. As an example, in this case the breakpoint is at 1215px instead of 1350px as written. I thought it was because of the scrollbar but I removed it and nothing has changed... Then, I tried several words (min-device-width instead of min-width, etc..). Same problem with IE (I did not verify on Mozilla). I checked my reset css, I have the latest version of normalize.css...

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

I have already used that structure of media query previously and that worked very well, could it come from an update? I don't know any more where to look, would anybody have an idea?

先谢谢您

Lo

推荐答案

确保您拥有:

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

在页面的head中.

这篇关于媒体查询断点值错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！