em和rem笔记

简介

单位

在编写网页过程中需要对元素进行字体,宽高,颜色等的设置,这些需要使用单位。在css中设置字体和宽高使用的单位可以一致,例如:px/em/rem

rem来源

rem是css3中的单位

和px关系

px是使用最多的单位,emrem可以和px换算

建议

在做移动端项目的时候建议实用rem作为单位,方便实现响应式效果。

em详细说明

em参照父级元素大小font-size:20px,子元素font-size:1em,那么子元素大小为20px
em合适的使用场景:text-indent(首行缩进)/line-height.

rem详细说明

rem参照的是html标签的字体大小
remem不同点:em参照父级元素,如果父级元素没有设置字体大小,则继续向上查找,直至最后。rem直接参照html标签字体大小,并且所有使用rem单位的都是参照html标签
所以只需要设置html标签字体大小,就可以影响全局。
在做响应式网站时,可以根据媒体查询去调节html标签的字体大小实现共同调节其他标签字体大小
使用媒体查询调节html字体大小,效果不够精细(大小是分段调节的),
可以使用js动态计算html的font-size。

使用注意点

rem使用过程中要时刻注意字体最小12px的问题
设置html的font-size属性时候,最好不要小于12px

如果设置了10px,使用1rem时,其实是12px,因为最小值是12px。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 简单介绍 单位 在编写网页过程中,需要对元素(标签)进行宽高、颜色。字体等的设置,这些需要使用单位。在CSS中,设...
    立早人青小超人阅读 528评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • 简单介绍 单位 在编写网页过程中,需要对元素(标签)进行宽高,颜色、字体等的设置,这些需要使用单位。 在CSS中,...
    Rubycui阅读 152评论 0 0
  • 简单介绍 单位 在编写网页过程中,需要对元素(标签)进行宽高、颜色、字体等的设置,这些需要使用单位。在CSS中,设...
    晴天_jy阅读 234评论 0 2
  • 标签(空格分隔): em rem 简单介绍 单位 在编写网页过程中,需要对元素(标签)进行宽高、颜色、字体等的设置...
    言歌不言歌阅读 279评论 0 0