前往顾页
以后地位: 主页 > 收集编程 > Asp实例教程 >

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

时候:2018-12-20 23:37来源:知行网www.zhixing123.cn 编辑:麦田守望者

看 CSS 文件的时候发明引入了一个新年夜小单位:rem,固然 CSS 文件注释里有介绍,但看半天拿着手机上的计较器计较了几下愣是没搞大白,怕是新东西搜出来的都是英文看着累就没找 谷歌,而是百度了一下,百度的成果就是看到一篇文章被转来转去,来转去,转去,去。。。

愁闷之下回到主题的 CSS 再看那介绍,翻开电脑的计较器,一计较,竟然被我整大白了,本来本来计较值不等是因为我手机的计较器设置了只保存小数点后两位的启事,真是囧。。。

其实 pxem 的关系我都没整大白,就来讲这个 rem 让我感觉很忐忑的。。。

评论里有热情同窗一句话处理了我下面 px 和 em 关系问题:

em 以父元素为参照

remem 一样,也是一个相对年夜小的值,它是相对根元素 <html>,比如假定,我们设置 html 的字体年夜小的值为 html{font-size: 87.5%;}(也就是 14px,这是 twentytwelve 默许主题里的设置)。然后其他的字体就是将你要的值除以 14 获得的值;比如默许的twentytwelve主题年夜小是 960px;换算成 rem 就是 960/14=68.57142857142857rem(我这个用电脑的计较器计较的,比默许的更切确,嘿嘿);padding 的 24px 也就是 24/14=1.714285714285714rem(当然还是比 css 文件里的切确),以此类推。

简朴直白的说法,可以用评论里同窗的一句话来表达:

如果你没有在根元素指定参照值,那浏览器默许就是 1rem 为 16px,如果你指定了值假定为 20px,那 1rem 就为 20px。

emTable

下面的 14 是个变量,相对你对根元素 html 字体年夜小的设定,如果你设定的是 62.5%,那除数就变成 10 了,对比表如右图:

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

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

再别的,有很多朋友问我:为啥 html 设置成 62.5%,或 10px 时,这类换算有效了呢?颠末研究发明,不晓得甚么时候开端,小于 12px 或 75% 的字体年夜小 rem 确切不支撑这类换算,这可能与现在有些浏览器不支撑 12px 以下的年夜小有关。所以,记着一点:如果要利用 rem 单位,html 的字体默许年夜小必须设置为 12px 或以上才行。

------分开线----------------------------
标签(Tag):css
------分开线----------------------------
保举内容
猜你感兴趣