问题
Can't say is it a real problem or I'm just being paranoid but this behavior of media queries is really driving me crazy for last couple of hours.
Let's consider this really simple CSS.
body {background:yellow}
@media (max-width:399px) {
body {background:red}
}
@media (min-width:400px) {
body {background:blue}
}
Problem happens when width is 399.333px! (or any float-value between 399 and 400 integers)
My logic says that by using this CSS style page will never turn yellow, right? It should be red when viewport size is shorter than 400px in width and blue when it's 400px and over.
Weird behavior happens with Opera browser (I'm using 36.0 at the moment) on Windows when page is zoomed-in. I understand that viewport width is calculated using real viewport width and current zoom-level and this value should always be integer. But...
Looks like Opera doesn't round/floor/ceil that value which affects on entire page. I'm getting yellow background when Opera finds out that viewport-width is not 399px or 400px but it's 399.333px!? So none of media queries fulfills condition.
I've already tried to find an answer here and web-wide but nothing is close enough to this problem. This problem already happened to me when I was using em units so I could work around and turn them to pixels, but I can't affect user's decision about using browser's zoom feature.
Is there something I can do to prevent this or that's just the way it is?
The easiest way to simulate this behavior is hitting CTRL,+ three times and than easily move vertical slider in Object Inspector.
update:
Yes, I can fix it with "mobile/desktop first" approach by linking each media break-point to previous one but that's not part of my question. Also, default body style is here as visual aid only and changing that really doesn't solve problem.
来源：https://stackoverflow.com/questions/41449476/media-queries-running-weird-because-of-non-integer-width