您的位置：首页 > Web前端 > CSS

CSS3中的rem值与px之间的换算

2016-01-20 00:00 459 查看

摘要: 强大的自适应工具！

看CCS文件的时候发现引入了一个新大小单位：rem，CSS文件里有介绍，看半天拿着手机计算了几下愣是没搞明白，怕是新东西搜出来的都是英文看着累就没找google，而是百度了一下，百度的结果就是看到一篇文章被转来转去，来转去，转去，去。。。

郁闷之下回到主题的CSS再看那介绍，打开电脑的计算器，一计算，居然被我整明白了，原来原先计算值不等是因为我手机的计算器设置了保留两位小数点的原因，真实囧。。。

其实px和em的关系我都没整明白，就来说这个rem让我觉得很忐忑的。。。

rem好像也是一个相对大小的值，它是相对于根元素<html>，比如假设，我们设置html的字体大小的值为

html｛font-size: 87.5%;｝

（也就是14px，这是twentytwelve默认主题里的设置）。然后其他的字体就是将你要的值除以14得到的值；比如默认的twentytwelve主题大小是960px；换算成rem就是960/14=68.57142857142857rem（我这个用电脑的计算器计算的，比默认的更精确，嘿嘿）；padding的24px也就是24/14=1.714285714285714rem（当然还是比css文件里的精确），以此类推。

上面的14是个变量，相对于你对根元素html字体大小的设定，如果你设定的是62.5%，那除数就变成10了，对照表如右图：

用这个rem单位的好处有啥我不知道，不过如果你根元素的字体大小选62.5%，那px和rem之间的换算就是px直接除以10就得到rem了，这比em简单多了，到现在我都没搞清楚em和px之间是如何换算的。

另外rem在ie8及ie8以下的版本不支持外其他浏览器都支持，如果你要考虑ie8及一下，可以像twentytwelve默认文件那样设置个px再设置个rem就可以了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航