绝对长度单位：px;
相对长度单位：em、rem、vh、vw
px
1px指的是1个css像素，一个css像素是可以改变的。如下：
- web端：设置电脑分辨率，比如将电脑分辨率调节成200%，那么1px会占据2*2个物理像素点。
- 移动端：受分辨率影响，移动端中的1个css像素通常对应多个物理像素，设备像素比越大，一个css像素中包含的物理像素越多。
我们所了解的电脑屏幕分辨率，如1440*900或者 1080*1240，这些都是指css像素，它可能包含多个物理像素，如果是二倍屏，则包含2*2的物理像素，3倍屏就是9个。
rpx
使用场景：小程序
能认为，在二倍屏中，2rpx等于1px；在三倍屏中，3rpx等于1px。但不完全准确。 比如，iphone6的css像素是 375px，微信规定所有的手机都有750rpx，所以， 1rpx = css像素 / 750，至于1个css像素中有多少个物理像素点，就是1个css像素*像素密度
em
使用场景：不太建议使用，除非特殊情况下需要在某盒模型下的所有子元素针对其父元素进行整体设置。
em是相对长度单位，相对于其最近的祖先元素的字体大小，如果其祖先元素均没有设置过字体，那么，将会获取浏览器默认的字体大小：16px。但需要注意的是，一定要留意最近的祖先元素的字体单位是否也设置了em，如果是的话，子元素的字体大小是父元素和子元素的乘积。
rem
使用场景：监听屏幕宽度来判断设备类型，根据设备类型去设置当前的字体大小。
相对于html根元素的单位，只修改根元素，页面整体字体就会随着根元素成比例放大缩小，避免了字体大小逐层复合的连锁反应。
VW
使用场景：大屏、大数据展示。
将可视窗口的宽度平分为100等分，每一份为1vw，不受显示器分辨率的影响。当调节电脑分辨率时，使用vw做适配不会出现自适应问题。 缺点：使用vw会导致整体布局同步放缩，字体可能会小到看不清。当然，谷歌浏览器特意对中文做了最小字体限制，限制了它最小为12px。
个人认为视口单位是个用来做响应式布局很不错的单位，当然如果要使用vw，vh，我的建议是rem结合vw来开发，因为视口单位有个缺点就是它没有最小或者最大限制，这就达不到我们都时候所希望的一个限制（比如窗口太小了，字都看不清）。所以我们可以在根元素上设置vw和vh，然后在根元素上限制最大最小值，然后配合body设置最大最小宽度。
%
百分比是相对于其父元素的宽度进行一百等分。 但是，要留意：
- 对于position: absolute;的元素是相对于已定位的父元素
- 对于position: fixed;的元素是相对于 ViewPort（可视窗口）
rpx（或px）和vw（或rem），在移动端选择哪个？
我个人认为vw和rem都是属于相对单位，会造成页面通篇放大或通篇缩小。除非做大屏系统需要整体放大，移动端并不认为这是一个好的方案。个人认为移动端应该使用rpx（小程序）或px（h5页面）结合flex布局去完成移动端适配。
关怀模式是怎么设置的？
只出现在平板和智能手机上
调整了text-size-adjust属性，该属性可以选择百分数。用户选择的就是百分数。所有font-size都会乘以这个百分数。只对文字起作用，不是直接修改根元素的font-size大小。可见，微信并没有修改font-size，只是渲染时，针对所有文本的font-size乘了个固定系数。
关怀模式溢出主要的原因还是装载文字的盒模型限定宽高了。解决方法：
- 不限定宽高，使用flex布局，允许文字折行。
- 文字超过最大边界则省略多余内容。
