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

时间 2019-11-20

标签 css3 css rem 之间换算栏目 CSS 繁體版

原文原文链接

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

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

其实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了，对照表如右图：google

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

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