Question

px em rem fr 前端单位的区别

Answer 1

一、 px 全称是pixel(像素)，相对长度单位，相对于屏幕分辨率而言的。
特点：IE无法调整使用px作为单位的字体大小；
二、em是基于基数来计算出来的相对字体大小
特点：①em是相对长度单位，相对于当前对象内文本的字体尺寸。如果当前对象文本大小未设定，则相对于浏览器的默认字体尺寸。
② em的值不是固定的；
③ em会继承父级元素的字体大小；
根据以上特点我们知道em单位转换为像素值，大小取决于自身父级元素所设置的px值大小。父级元素字体大小乘以em的值。
三、rem是css3新增的属性，也是一个相对单位
特点：rem只相对于HTML根元素，所以通过rem既可以设定页面根元素就成比例的调整所有字体的大小，有可以避免字体大小逐层复合的连锁反应。
如：浏览器默认的字号16px，那么，
| px | rem |
| 12 | 12/16 = .75 |
| 14 | 14/16 = .875 |
| 16 | 16/16 = 1 |
| 18 | 18/16 = 1.125 |
| 20 | 20/16 = 1.25 |
| 24 | 24/16 = 1.5 |
| 30 | 30/16 = 1.875 |
| 36 | 36/16 = 2.25 |
| 42 | 42/16 = 2.625 |
| 48 | 48/16 = 3 |

四、fr是自适应单位，fr单位被用在一系列长度值中分配剩余空间，如果多个已指定多个部分，则剩下的空间根据各自数字按比例分配。
（另外，vh，vw也是css3新增属性，分别是相对于视口的高度和宽度，视口被分为100等分）