rem介绍、vw、vh实现等比例缩放

rem解决移动端等比例缩放

1. 三个单位之争：px、em、rem

（1）px是像素的意思，例如：50px就是50像素的大小，就是组成我们图像的最小单位，指的是将图像放很大会发现里面是由1小格小格组成，那一个小格就是1个像素点；

（2）em：相对单位，指的是相对于父元素的字体大小；1em是1倍的父元素字体大小，2em是2倍的父元素字体大小；

（3）rem：相对单位，指的是相对于根元素（html）字体大小，1rem就是1倍的html字体大小，10rem就是10倍的html字体大小；

2. rem详细介绍：

当然这个html的字体大小首先是要设置好的，如下图所示：

我们之前设置盒子的宽和高用的都是px单位，设置的是固定的宽和高，但是因为每个移动端设备的分辨率不同，这个宽和高在这个手机上刚好合适，但是在另一个手机上就不合适了，所以我们是能采用百分比就百分比，能弹性盒弹就性盒，但是避免不了盒子设置固定的高度，所以我们就不要用px了，用rem这个单位来设置和衡量，因为这个rem是相对于根元素的大小，大家都用rem，大家都一个标准就是html。

详细介绍请看：

147-rem布局准备工作_哔哩哔哩_bilibili

3. 用rem去实现移动端不同设备的等比例缩放

✍方法一：增加js代码配合rem来实现等比例缩放

要想实现这个功能呀，最最关键的一点是：将px单位转化为rem单位；

下面是详细的步骤：（这个方法是用增加js代码去实现的）

（1）先在head里style外增加下面一段代码：

在style里规定好html的font-size值：

如果你的css样式中所有的宽和高，是按照物理像素来的，那这里的320就是你整个布局的物理像素的宽度，这里的320是一个例子哈，不是值为320，就是这里的值就是你整个布局的物理像素；但是当你css样式中所有的宽和高都是按照css像素来的，那么你这里320这个地方的值就要写成测量之后物理像素，再除以设备像素比，得出css像素；后面那个20指的是设置的html根元素的font-size大小，，，

（2）第一步我们已经改了html的font-size值，但是只是表面上改了，html的font-size值默认是16px，我们还要去后台改，在“文件”-“首选项”-“设置”-在搜索框中搜“px”，搜完就出来了下面的样子，然后将下面红框里的16改为20，，，

（3）ctrl+A全选代码，按F1，或者Fn+F1出现搜索框，搜"CSSRem:Px To Rem"，搜到之后点击即可，这时候html的font-size值也会变成rem单位的，把它改回原来的px值即可，例如：是1rem，改为20px这个格式的（单位前面的数字不重要，是拿来举例的，别到时候只改了单位，数值不改。。。）

✍方法二：用单位vh和vw配合rem来实现等比例缩放

vh和vw的介绍：

vh和vw本身就是一个等比例缩放的单位，不是固定的宽度，会根据设备的大小而变成相应的px值，我们用vh和vw来代替js代码配合rem实现等比例缩放，关键是将html的font-size值又第一种方法的px值用vw值代替，步骤如下：

（1）css里的宽和高按照css像素来设置，单位是px，就是设计稿中的物理像素除以设备像素比得出的值，然后还是加上html的font-size代码：

我们这里设置html的font-size值为16px，要在后台改过来：在“文件”-“首选项”-“设置”-在搜索框中搜“px”，搜完就出来了下面的样子，然后将下面红框里的20改为16，，，

（2）和第一种方法一样，ctrl+a全选代码，按F1或者Fn+F1，出现搜索框时搜索"CSSRem:Px To Rem"，搜到之后点击即可，这时候html的font-size值也会变成rem值，跟第一种方法不同的是我们这里要将px值改为vw值来计算，拿iPhone4来讲，css像素宽度是320px（整个屏幕宽度），然后100vw也是整个视口宽度，所以对于iPhone4来说，320px==100vw，（这个值会根据不同的移动端而不一样，比如iPhone12pro的css像素宽度是390px，所以也就是390px==100vw），所以按照320px==100vw的比例来讲，font-size的16px==5vw，所以将这个html的font-size值改为由16px改为5vw，，

（3）因为vw本身就是一个等比例缩放的单位，不是固定的宽度，会根据设备的大小而变成相应的px值，但是px是固定的值，所以在移动端会出现宽度不够或者多了的问题，但是vw会根据页面的比例来进行px值换算。

视频见：149-vw和vh_哔哩哔哩_bilibili