由于非整数宽度，媒体查询运行异常 [英] Media queries running weird because of non-integer width

问题描述

不能说这是一个真正的问题，还是我只是偏执，但是最近几个小时，媒体查询的这种行为确实使我发疯.

让我们考虑一下这个非常简单的CSS.

 body {background:yellow}

 @media (max-width:399px) {
   body {background:red}
 }

 @media (min-width:400px) {
   body {background:blue}
 }

宽度为399.333像素时会出现问题！(或399至400整数之间的任何浮点值)

我的逻辑说，通过使用此CSS样式页面将永远不会变黄，对吗?视口尺寸的宽度小于400px时应为红色，大于等于400px时应为蓝色.

页面放大时，Windows上的Opera浏览器(我现在使用36.0)会发生奇怪的行为.我了解视口宽度是使用实际视口宽度和当前缩放级别计算的，并且该值应始终为整数.但是...

看起来Opera不会将影响整个页面的值四舍五入/限制/限制.当Opera发现视口宽度不是399px或400px而是是399.333px 时，我得到的是黄色背景！因此，没有任何媒体查询可以满足条件.

我已经尝试在此处和整个网络中找到答案，但是没有一个问题足以解决这个问题.当我使用em单位时，这个问题已经发生在我身上，因此我可以解决并将其转换为像素，但是我不会影响用户对使用浏览器缩放功能的决定.

有什么办法可以防止这种情况发生吗?或者就是那样?

模拟此行为的最简单方法是按CTRL,+ 3次，然后轻松地在Object Inspector中移动垂直滑块.

更新:

是的，我可以通过将每个媒体断点链接到先前的断点来使用移动/桌面优先"方法进行修复，但这不是我的问题.另外，默认的body样式在这里仅作为视觉辅助，而更改确实不能解决问题.

解决方案

一个简单的解决方案可能是:

 body {background:yellow}

 @media (max-width:400px) {
   body {background:red}
 }

 @media (min-width:400px) {
   body {background:blue}
 }

由于顺序，最后一个媒体查询中的规则将简单地覆盖以前存在的任何参数.

这样，这两个媒体查询就不会出现这种情况/宽度:399.9999 ...以下的所有内容都满足第一个条件，400以上的所有内容都满足第二个条件，并且如果宽度恰好是400，则第二个媒体查询中的规则由于顺序而将覆盖先前的规则.

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.

解决方案

A simple solution could be the following:

 body {background:yellow}

 @media (max-width:400px) {
   body {background:red}
 }

 @media (min-width:400px) {
   body {background:blue}
 }

The rules in the last media query will simply overwrite any parameters that exist previously, just because of the order.

That way there won't be a situation/width which isn't covered by these two media queries: Everything up to 399.9999... (whatever) fulfills the first condition, everything above 400 will meet the second condition, and if the width is exactly 400, the rules in the second media query will overwrite the previous ones due to their order.

这篇关于由于非整数宽度，媒体查询运行异常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！