rem、em、px、rpx、vw、vh、%等

rem

含义

rem是CSS3的新标准，也是相对的长度单位。值是相对于根元素的字号大小来说的。

根元素的字号大小为20px时，某个子元素的宽度为8rem，即为 20 x 8 = 160px

作用

主要是为了用于移动端屏幕适配。

一般情况下，移动端的UI设计稿有640px和750px两种宽度，想要适配多种情况下的屏幕，就必须使用相对单位，而rem就是最好的选择。

媒体查询

先使用媒体查询，判断屏幕大小，再将屏幕宽度均分
640px宽的UI稿，可以分为40份，则1rem = 640px / 40 = 16px
750px宽的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份，默认情况下只可以给盒子设置宽度，设置高度是无效的。

作用

百分比是继承于父级元素的。想要用%给盒子设置高度，就需要给父元素设置一个固定的高度，才能生效。

vh、vw、%的区别

vh、vw是相对于屏幕可视窗口确定的，%是相对于父级元素确定的。
vh、vw 设置宽高是有真实高度的，但%不是