在rem佈局中使用vw

最近在知乎上看了這個問題 爲何不少web項目仍是使用 px，而不是 rem？，看得大神們討論，看得也是暈暈的，我也不知道本身看懂沒有，總體看下來，比較同意這個觀點：

大屏手機讓用戶看到的更多，而不是看到的更大

目前移動端兼容不一樣屏幕尺寸基本上都是rem佈局，rem佈局的本質是 對頁面的等比縮放，就像是一張圖片的放大縮小，這個方案在手機上還能夠，可是把給iphone7設計的頁面用rem原封不動擴展到ipad上，就會發現很災難(好歹限制一下根元素字體的值)字體和圖片都巨大。最理想的狀態仍是要對平板等大屏設備再加一個設計稿，響應式開發。除去平板設備的話，我以爲用rem適配是沒啥問題的。

而後，我把項目中的rem嘗試用vw稍微改了一下，爲何要用vw，vw是viewport的百分比單位，1vw等於百分之一的viewport寬度(layout viewport，也能夠跳過這個概念)，要作到對設計稿對等比縮放，直接用這個單位是最簡單的，並且如今兼容性好像沒什麼問題，傳統的rem還要寫一個腳本，因此嘗試一下vw

個人工做流程是這樣的：

1. 拿到設計稿，通常是以iphone678爲基準的(750px寬)，而後用藍湖轉化成1倍的代碼，開發時直接拷貝藍湖生成的樣式。
2. 在工程中使用pxtorem轉換(pxtorem能夠將代碼裏的px根據本身定義的rootValue值換算成rem)，rootValue設置爲16，爲何是16，由於咱們在第一步的時候是按一倍圖來寫的，若是哪天不想用rem了，能夠直接，把pxtorem去掉，代碼還直接還原成px
3. 在css最前面加入關於html的字體設置，我用的less

.font-size(@sizeValue:16) {
  @vw: 16 / 375 * 100;
  @result: @sizeValue / 16 * @vw;
  font-size: ~"@{result}vw";
}
html {
  .font-size(16);
}
html {
  //限制根元素最大最小字體值，只在320-480之間使用vw
  @media screen and (max-width: 320px) {
    font-size: 16px;
  }
  @media screen and (min-width: 480px) {
    font-size: 18px;
  }
}
body {
  max-width: 1000px;
  min-width: 320px;
  margin: auto;
}
複製代碼

完畢，可能有不少錯誤，歡迎評論指出～