相关布局单位
1.px
px是Pixel的缩写,也就是屏幕上一个像素点,所以px是精准的绝对的,由此它在不同的屏幕上会引起布局错乱的适配问题。
2.em
以父元素的font-size为基准的相对大小, 换算公式:1 ÷ 父元素的font-size × 需要转换的像素值 = em值,
这样一来“em”就是一个相对值,而且是一个相对于父元素的值。在这样的定义下可以预知当存在多层布局结构时,em的计算是十分繁琐的,也会存在无法预知的错误风险。
rem 概念
rem 是在 CSS3 中发布的, W3C的官方描述是:“font size of the root element",意思就是 rem 是相对于根元素 font-size 的大小。 由于根元素是唯一的,所以rem比em更方便,安全。
默认情况下 1rem 值为 16px (100%),现在设置 1rem = 14px(62.5%)的情况下看如何计算元素的大小:
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
这样下来,html的字体大小为 10px, body的字体大小为 14px, h1的字体大小为 24px。
rem 兼容性
在物理屏幕大小和系统都有差异的移动端,前面说到浏览器默认1rem=16px是不一定的,所以为了在不同大小屏幕下精准实现设计稿的效果,我们需要根据设计稿尺寸(物理屏幕)大小,设定不同 html 的 font-size 。
这里有一个方便的计算工具:grunt-px2rem
扩展阅读:web app变革之rem