HTML-移动端-rem px vw vh 的转换

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值就可以了（这是其中一种方法）
  • 如果想要让一个盒子覆盖整个页面 需要设置为

      width: 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）
  • 插件安装以及设置的链接：https://www.jianshu.com/p/bb48fbdacb26
• 3：设置插件的属性 这是最关键的一步
  • 即px转rem的比例
• 4：正常编写代码，将这个当做一个PC端的网页写
• 5：边写边转化为对应的rem值