rem原理

 * rem原理： rem是指相对于根元素的字体大小的单位，即根据html元素的font-size来计算大小。

* rem布局的实现：

1、设置页面的viewport

2.动态计算并设置不同尺寸html的font-size属性(大白话：动态计算出来不同手机页面的html的font-size)，引入rem。js代码

 3.按照PC端布局方式正常布局，将px单位改为rem单位（较小 的长度比如1px的边框就不需要转换成rem,直接设置px）

640px    1rem  =100px

320px    1rem =50px  ?

375px    1rem =?px  

280px    1rem =?px  

        320     ？

        ——  =  ——

        640     100

320   375  280是当前屏幕宽度

        ? = 320  * 100    /   640

        ? = 375  * 100    /   640

        ? = 280  * 100    /   640        

        选中要换算的代码，按住alt+z

         在 Visual Studio Code 装一个插件: px to rem

        文件--首选项--设置--搜索 px to rem --16改成100

 转换px--rem或rem--px  捷键：alt +z（选中要换算的代码）