前端单位的解读和换算px/%/em/rem/vh/vm/vim/vmax

px

像素 固定单位

%

相对单位 相对于最近的父元素

em

em：大小相对于font-size
例：font-size=100 10em =1000
默认 1em=16px，自己有字号大小就相对于自己如果没有就往上找
由于fontsize经常发生改动 所以项目中并不常用

rem（root em）

rem：相对于根元素（html）的字号大小
默认 1rem=16px，依旧相对于像素
所以需要找一个根据用户界面可变的单位

vw（viewport width）

vw：视口宽度，相对于窗口（视口）
满屏幕为100vw
例：如果设置成10vw就是所设置的属性是整个窗口的10%

vh（viewport height）

同 vw
平时多用vw vh多变所以用的比较少

vmin（viewport min）

vmin：相对于视口中最小那个
例：高100，宽200则动高属性发生变化

vmax（viewport max）

同 vmin

重点：
将设置到html的像素单位改成vw然后结合rem即可实现实时动态改变大小同时引出以下

vw rem px 之间的换算：
举例来换算：

vw满屏=100vw

A、如果现在设备时iphone6则物理像素为750 浏览器解析（css像素）为375（这里需要用物理除dpr ）
故 100vw=375px 1vw = 3.75px

B、默认1rem = 16px (可自行设置)

故可得1rem = 16px = 4.266667vw



由于以上有误差 所以通常假设1rem=120px 此时1rem=32vw
（不同设备会设置不同的比例由开发者自己定）

偷偷告诉你其实直接用vm也可以但是要在字号大小大于12的情况下（谷歌浏览器只能识别12以上的）

12以下都是12

总结完毕 rem实战如下

方案一：

@media screen and (min-width: 320px) {html{font-size:50px;}}
@media screen and (min-width: 360px) {html{font-size:56.25px;}}
@media screen and (min-width: 375px) {html{font-size:58.59375px;}}
@media screen and (min-width: 400px) {html{font-size:62.5px;}}
@media screen and (min-width: 414px) {html{font-size:64.6875px;}}
@media screen and (min-width: 440px) {html{font-size:68.75px;}}
@media screen and (min-width: 480px) {html{font-size:75px;}}
@media screen and (min-width: 520px) {html{font-size:81.25px;}}
@media screen and (min-width: 560px) {html{font-size:87.5px;}}
@media screen and (min-width: 600px) {html{font-size:93.75px;}}
@media screen and (min-width: 640px) {html{font-size:100px;}}
@media screen and (min-width: 680px) {html{font-size:106.25px;}}
@media screen and (min-width: 720px) {html{font-size:112.5px;}}
@media screen and (min-width: 760px) {html{font-size:118.75px;}}
@media screen and (min-width: 800px) {html{font-size:125px;}}

方案二：

@media screen and (min-width: 320px) {html{font-size:312.5%;}}
@media screen and (min-width: 360px) {html{font-size:351.5625%;}}
@media screen and (min-width: 375px) {html{font-size:366.211%;}}
@media screen and (min-width: 400px) {html{font-size:390.625%;}}
@media screen and (min-width: 414px) {html{font-size:404.2969%;}}
@media screen and (min-width: 440px) {html{font-size:429.6875%;}}
@media screen and (min-width: 480px) {html{font-size:468.75%;}}
@media screen and (min-width: 520px) {html{font-size:507.8125%;}}
@media screen and (min-width: 560px) {html{font-size:546.875%;}}
@media screen and (min-width: 600px) {html{font-size:585.9375%;}}
@media screen and (min-width: 640px) {html{font-size:625%;}}
@media screen and (min-width: 680px) {html{font-size:664.0625%;}}
@media screen and (min-width: 720px) {html{font-size:703.125%;}}
@media screen and (min-width: 760px) {html{font-size:742.1875%;}}
@media screen and (min-width: 800px) {html{font-size:781.25%;}}
@media screen and (min-width: 960px) {html{font-size:937.5%;}}

方案三：

var designWidth = 640, rem2px = 100;
document.documentElement.style.fontSize = 
  ((window.innerWidth / designWidth) * rem2px) + 'px';

方案四：

  var designWidth = 640, rem2px = 100;
document.documentElement.style.fontSize = 
  ((((window.innerWidth / designWidth) * rem2px) / 16) * 100) + '%';

以上四种方法没有看懂可以参考大佬博客：rem用法剖析

博主辛苦了 我要给你点赞 我要给你关注 我要/****/嗯嗯~

好吧再给一个简便方法：：：：：
app.vue中设置
🆗 直接使用即可