vw/vh rem px 三者的转换（快速入门移动端页面编写）
- 1：三种单位的转换
- 2：如何适配移动端的不同设备
- 前提知识：
- 手机端的长宽是实际设计过程中的两倍
- 比如手机端是 750 * 1200
- 那么具体实现的时候应该是 375px * 600px
- 好，记住这个结论，当有一张设计图摆在你面前的时候，你只需要将它长宽除以二，就没问题了。
- 这样说不知道有没有讲明白，没有的话请留言。
三种单位的转换
- vw / vh
- 分别是 viewwidth 和 viewheight 的缩写
- 100vw 等于整个屏幕宽度 100vh等于整个屏幕高度
- 例如某设备宽高是 375px * 600px
- 那么 1vw = 3.75px 1vh = 6px
- 要想适配移动端的设备，只需要讲 html font-size设置为合适的 vw值就可以了（这是其中一种方法）
- 如果想要让一个盒子覆盖整个页面 需要设置为
100vw;
height: 100vh;
- rem
- 1rem 等于HTML的字体大小（默认为16px）
- 使用rem可以使得编写的移动端网页尽可能地适配设备，而不会出现在iphone没有乱，到华为就一团糟的场景
- px：浏览器的像素，一种相对单位
- 三者如何转化呢？
- 例如有一张设计图 375px * 600px
- 我们可以这样设置HTML的字体大小
html {font-size: 37.5vw;}
- 这样的话 1rem=37.5vw=100px
- 代码区内的font-size 37.5也可以取其他的值（1-100），我这样取是因为1rem等于10px的话使用起来更有优势
如何适配移动端的不同设备
- 例如转换后的长宽分别为 375px 600px
- 1：定义HTML的字体大小（选择一个对rem和px的转换比较有好的值）
- 2：下载对应编辑器上的插件，px转rem（vscode是cssrem）
- 3：设置插件的属性 这是最关键的一步
- 4：正常编写代码，将这个当做一个PC端的网页写
- 5：边写边转化为对应的rem值