是否有可能使用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/ 。
细则中指出此有关的相对单位等均有rem
和em
:
在媒体查询相关单位基于初始值,这意味着单位从不基于声明的结果。 例如,在HTML中,“时间”单元是相对于“字体大小”的初始值。
(的初始值font-size
是medium
,这通常等于在浏览器的用户偏好的默认字体大小设置。)
由于媒体查询3不适用于除上相对单位以上报价任何具体单位定义特殊的规则, rem
应该像em
,工作过的初始值font-size
。 如果它不能在Chrome中工作,这是最有可能的错误。
事实证明,这是Webkit的问题#78295(未解决为2012-08): 支持在媒体查询CSS REM单元 (通过http://fvsch.com/code/bugs/rem-mediaquery/ )。
发布后低于这个问题的答案窃听我。 我没有在Chrome与我工作的现场多了几分测试。 关于物权的是在浏览器的错误的职位是正确的,他们没有工作,所以我改变了像素只为媒体查询。
*要回答你的问题,REMS正在为我调整使用媒体查询内容区域的高度。 这是怎样的Chrome浏览器interperets宽度似乎从Firefox不同,但是这不是一个基于物权问题。
请记住,当我使用REMS和EMS是设置字体大小后:1EM; 或字体大小:16px的; 对HTML或身体。 我倾向于坚持FONT-SIZE:1EM; 在HTML标签。 创建默认的作品无论从任何用户设置的默认字体大小,对他们使用的任何设备。 雷姆的是相对于1EM的根值。 该根值是由用户的默认字体大小给定的,所以一切应该根据用户的字体大小偏好比例绘制,并且是设备/象素密度独立的。
这意味着用户是否正在使用“正常” 72或96像素/英寸装置或视网膜(或其他高像素密度屏幕)一切应该看起来“相对”相同的从设备到设备。