em、rem、vw、vh、百分比、px

[wasaisai]

1 区分em和rem

• em相对与父元素，rem相对于根元素

• em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小

• rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其初始字体大小

• rem取值分为两种情况，设置在根元素时和非根元素时
  html {font-size: 2rem} //作用于根元素，相对于原始大小（16px），所以html的font-size为32px
p { font-size: 2rem} 作用于非根元素，相对于根元素字体大小，所以为64px

• em适合与字体和行高，有些时候子元素字体就应该相对于父元素，元素行高就应该相对于字体大小；而rem的优点在与统一的参考系

2. 使用rem布局

• rem布局的本质；等比例缩放，一般是基于宽度

• 经UE图中获取的像素单位值，转换为rem单位值： 元素宽度/UE图宽度 * 100

• rem是弹性布局的一种实现方式，弹性布局可以算作响应式布局的一种，但响应式布局不是弹性布局，弹性布局强调等比缩放，100%还原；响应式布局强调不同屏幕要有不同的显示，比如媒体查询

• rem仅能做到内容的缩放，但是对于非矢量资源，比如图片放大时的失真，并无法解决

2. 百分比

• 子元素的宽高百分比是直接父元素的宽高

• 定位中的top、bottom、left、right等都是相对于直接非静态定位的父元素的宽高

• padding如果设置百分比，无论是垂直方向还是水平方向，都是相对于直接父级元素的width与父元素的height无关

• margin与padding一样，设置完百分比之后，都是直接父元素的宽的百分比，与高度无关

• border-radius不一样，设置完百分比之后，则是相对于自身的高度，除了border-radius之外还有translate、background-size都是相对于自身的宽度高度

3. vw、vh、vm

• vw：相对于视窗的宽度，视窗的宽度是100vw

• vh： 相对于视窗的高度，视窗的高度是100vh

• vmin：相对于视窗的宽度，取决于那个更小

• vmax：相对于视窗的高度，取决于那个更小的

• 与%的区别： %依赖于元素的祖先元素，vh/vw/vm依赖于视口的尺寸

html { font-size: 4.375vw } //4.275vw在视窗宽度为320px的时候，正好是14px（14/320=0.04375），现在页面上的所有以rem为单位的属性都会随着屏幕的宽度变化而自动响应等比变化

4. px

• 比较难总结，看链接

总结：

• 对font-size使用rem，对border使用px，对其他的度量方式如padding、margin、border-radius等使用em。然而在必要时，需要声明容器的宽度的话，使用百分比。

参考链接：
rem布局原理解析
别说你懂css相对单位
百分比布局
vw、vh、vm
像素
像素
像素