侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

css – 使用Chrome中的rem单元进行媒体查询?

2022-12-27 星期二 / 0 评论 / 0 点赞 / 29 阅读 / 1363 字

是否可以在Chrome媒体查询中使用rem单位? rem单元在Chrome中完美运行,似乎它们在媒体查询中不受支持.这可能吗?或者这个CSS有什么问题吗? body { backgroun

... . . 是否可以在Chrome媒体查询中使用rem单位?

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/.

.

解决方法

. The spec says this关于rem和em等相关单位:

.

Relative units in media queries are based on the initial value,which means that units are never based on results of declarations. For example,in HTML,the ‘em’ unit is relative to the initial value of ‘font-size’.

.

(font-size的初始值为medium,通常等于浏览器用户首选项中的默认字体大小设置.)

由于除了相对单位的上述引用之外,媒体查询3没有为任何特定单元定义特殊规则,因此rem应该像em一样工作,处理font-size的初始值.如果它在Chrome中不起作用,则很可能是一个错误.

. . .. ...

广告 广告

评论区