rem
含义
rem是CSS3的新标准，也是相对的长度单位。值是相对于根元素的字号大小来说的。
根元素的字号大小为20px时，某个子元素的宽度为8rem，即为 20 x 8 = 160px
作用
主要是为了用于移动端屏幕适配。
一般情况下，移动端的UI设计稿有640px和750px两种宽度，想要适配多种情况下的屏幕，就必须使用相对单位，而rem就是最好的选择。
媒体查询
先使用媒体查询，判断屏幕大小，再将屏幕宽度均分640px宽的UI稿，可以分为40份，则1rem = 640px / 40 = 16px750px宽的UI稿，可以分为40份，则1rem = 750px / 40 = 18.75px特殊情况下最小屏幕为320px, 可以分为40份，则1rem = 320px / 40 = 8px
function remSize() {let screenWidth = window.document.documentElement.clientWidth || window.innerWidth;if (screenWidth > 750) {screenWidth = 750;}if (screenWidth < 320) {screenWidth = 320}console.log('screenWidth:', screenWidth);document.documentElement.style.fontSize = (screenWidth / 40) + 'px';document.querySelector('body').style.fontSize = 0.3 + 'rem'}remSize()window.onresize = function () {remSize()}
flexible.js
适配方案采用rem布局，根据屏幕分辨率大小不同，调整根元素html的font-size,从而达到每个元素宽高自动变化，适配不同屏幕
// 安装依赖 npm install lib-flexible --save // main.js中引入 import 'lib-flexible/flexible'
1.检查下html文件的head中，如果有 meta name="viewport"标签，需要将其注释掉。 2.html的font-size是根据屏幕宽度除以10计算出来的，所以我们需要设置页面的最大宽度是10rem
px2rem插件
// 安装依赖 npm i -D postcss-px2rem // 一般为0.3.0版本 // vue-ci3及更高版本中 vue.config.js css: {loaderOptions: {postcss: {plugins: [ require('postcss-px2rem')({remUnit: 37.5 }) ] } } }
em
含义
em也是一种相对长度单位，但值是相对自身的字号大小。如果没有设置则参照父容器的字号大小或浏览器默认字号大小
自身元素的字号大小为10px时，某个子元素的宽度为1.6rem，即为 10 x 1.6= 16px
作用
由于em是相对于自身或父元素的字号大小，在多级嵌套的场景下很容易计算错误，所以其实并不是很推荐使用，更多的情况下还是推荐使用rem
px
含义
px表示像素，就是呈现在我们显示器上的一个个小点。也是我们在css中最常用的一种单位
每个像素点都是大小等同的，所以像素为计量单位被分在了绝对长度单位中。
rpx
含义
rpx是微信小程序独有的、解决屏幕自适应的尺寸单位。
作用
主要也是为了解决移动端的屏幕适配问题。
首先不论屏幕大小，将其屏幕宽度都认定为750rpx；再通过rpx相对长度单位设置元素和字体的大小；最终小程序在不同尺寸的屏幕下都可以自动适配
rpx与px的换算
换算有一个前提，或者说是在这个前提下rpx与px的换算是理想的。就是IPhone6为基础设计的UI稿。
IPhone6的宽度正好是375px，共750个物理像素。所以 375px = 750物理像素 = 750rpx。
同时UI以Iphone6为基础设计的UI稿正好是二倍图，即实际显示为40px，但设计图尺寸为80px，可于rpx进行无缝转换，绘制页面时直接写为80rpx即可
vh、vw
含义
将屏幕宽高各分为100份，100vh为屏幕高度，100vw为屏幕宽度。
作用
vh、vw都是可以作为相对单位给元素使用的，可以实现在浏览器视窗窗口的大小发生变化时而改变自身的大小
%
含义
%也是将屏幕分为100份，默认情况下只可以给盒子设置宽度，设置高度是无效的。
作用
百分比是继承于父级元素的。想要用%给盒子设置高度，就需要给父元素设置一个固定的高度，才能生效。
