媒体查询与Chrome的REM单位?(Media queries with rem units in

2019-06-27 14:49发布

是否有可能使用rem单位在Chrome媒体查询?

rem单位在Chrome中工作得很好,它只是似乎他们没有在媒体查询的支持。 这可能吗? 还是有别的东西不对的CSS?

body { background-color: yellow; }

@media only all and (max-width: 40rem) {
    body { background-color: red; }
}

@media only all and (min-width: 40rem) and (max-width: 60rem) {
    body {background-color: green;}
}

@media only all and (min-width: 60rem) {
    body { background-color: blue; }
}

住在http://jsfiddle.net/jsQ2N/2/show/ , em在-only版本http://jsfiddle.net/jsQ2N/3/show/ 。

Answer 1:

细则中指出此有关的相对单位等均有remem

在媒体查询相关单位基于初始值,这意味着单位从不基于声明的结果。 例如,在HTML中,“时间”单元是相对于“字体大小”的初始值。

(的初始值font-sizemedium ,这通常等于在浏览器的用户偏好的默认字体大小设置。)

由于媒体查询3不适用于除上相对单位以上报价任何具体单位定义特殊的规则, rem 应该em ,工作过的初始值font-size 。 如果它不能在Chrome中工作,这是最有可能的错误。



Answer 2:

事实证明,这是Webkit的问题#78295(未解决为2012-08): 支持在媒体查询CSS REM单元 (通过http://fvsch.com/code/bugs/rem-mediaquery/ )。



Answer 3:

发布后低于这个问题的答案窃听我。 我没有在Chrome与我工作的现场多了几分测试。 关于物权的是在浏览器的错误的职位是正确的,他们没有工作,所以我改变了像素只为媒体查询。

*要回答你的问题,REMS正在为我调整使用媒体查询内容区域的高度。 这是怎样的Chrome浏览器interperets宽度似乎从Firefox不同,但是这不是一个基于物权问题。

请记住,当我使用REMS和EMS是设置字体大小后:1EM; 或字体大小:16px的; 对HTML或身体。 我倾向于坚持FONT-SIZE:1EM; 在HTML标签。 创建默认的作品无论从任何用户设置的默认字体大小,对他们使用的任何设备。 雷姆的是相对于1EM的根值。 该根值是由用户的默认字体大小给定的,所以一切应该根据用户的字体大小偏好比例绘制,并且是设备/象素密度独立的。

这意味着用户是否正在使用“正常” 72或96像素/英寸装置或视网膜(或其他高像素密度屏幕)一切应该看起来“相对”相同的从设备到设备。



文章来源: Media queries with rem units in Chrome?