CSS单位 px,em, rem

px 像素,固定单位,页面缩放不改变大小

em 值不固定,会继承父级元素的字体大小,代表倍数

用法技巧:
1.通常浏览器默认样式16px,若子元素设定为1.2,结果为19.2px,出现非整像素数的误差。
2.将body的font-size设置为62.5%,即10px,那么其余子元素设定,如1.3em即 13px。可以避免非整像素数。

// html

<body>10px <span>16px</span></body>

// css

body  {font-size: 62.5%}
span {font-size: 1.6em;}  // span渲染结果为16px

rem 值不固定,是基于根原始<html>的,代表倍数

rem values are relative to the root html element, not the parent element

html { font-size: 62.5%; }
span {  font-size: 1.6rem; } // span 渲染结果为16px
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容