Media Queries breakpoint at wrong value

问题:

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%;
    }
}

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?

Thank you beforehand,

Loïc

回答1:

Ensure you have:

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

In the head of your page.

回答2:

Marked answer didn't resolve the problem.

It is just as mentioned in the comment by Scott Harrison , I did reset the zoom level back to 100% and it worked properly. (it was 110% initially)