ITPub博客

首页 > 移动开发 > HTML5 > rem和em的用法,你弄懂了吗?

rem和em的用法,你弄懂了吗?

HTML5 作者:ii_chengzi 时间:2018-07-15 20:40:22 0 删除 编辑

1、rem转化为向素值的方法

rem单位转化为像素大小取决于根元素的字体大小,即HTML元素的字体大小,根元素字体大小乘以rem。

例:根元素的字体大小 16px,10rem 将等同于 160px,即 10rem x 16px = 160px

2、em单位如何转化为像素值

当使用em单位时,像素的单位是em值乘以使用em单位的元素的字体的大小

例:如果一个 div 有 18px 字体大小,10em 将等同于 180px,即 10 × 18 = 180

总结:

rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。

em 单位基于使用他们的元素的字体大小。

rem 单位基于 html 元素的字体大小。

em 单位可能受任何继承的父元素字体大小影响

rem 单位可以从浏览器字体设置中继承字体大小。

使用 em 单位应根据组件的字体大小而不是根元素的字体大小。

在不需要使用em单位,并且需要根据浏览器的字体大小设置缩放的情况下使用rem。

使用rem单位,除非你确定你需要 em 单位,包括对字体大小。

媒体查询中使用 rem 单位

不要在多列布局中使用 em 或 rem -改用 %。

不要使用 em 或 rem,如果缩放会不可避免地导致要打破布局元素。

详细请访问:http://shenzhen.offcn.com/

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/31543790/viewspace-2157872/ ,如需转载,请注明出处,否则将追究法律责任。

下一篇: Python中的字典
请登录后发表评论 登录
全部评论

注册时间:2018-06-26

  • 博文量
    264
  • 访问量
    342550