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值