手機響應式wap網頁最佳方案

wap頁面怎麼作?

這個問題困擾了我很久，在PC上咱們慣用的px單位在手機上根本不適用，即便咱們寫了<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"/>防止網頁自動縮放也無濟於事，由於各手機分辨率大小不一樣。

用百分比佈局。寬度自適應作到了可是高度呢，高度也用百分比嗎？難道把元素的高度寫死嗎。這種作法就是jquery mobile頁面的作法了，大屏手機顯示效果很差看。

用Bootstrap作柵格化。這種作法有個很大的弊病，小屏隱藏多餘的元素來展現頁面，而實際上那些元素你都加載進來了，浪費資源。

前面兩種作法也很難完美還原設計圖的尺寸。那有什麼好的辦法呢？

靈活的em與靈活可控的rem

em是相對單位，相對於父級的字號。這裏的父級其實指的是祖先級，一直往上哪裏定義了字號就相對它，直到根節點html。

假設它是相對於根節點的，根節點html的字號通常是16px，那麼1em=16px、12px=0.75em，假如在到根節點以前的節點已經有設置過字號了，好比說它設置了2em，那麼1em=2em=32px、0.75em=24px。

這時候咱們就發現坑爹了，假如咱們是元素嵌套的，父級上設置了字號，這個單位換算的規則都變了！那怎麼辦？

rem也是相對單位，可是它是相對根節點的。這個就好辦了，永遠相對同一個字號，規則就同樣了。假設根節點設置了font-size=16px 那麼1em=16px、12px=0.75em；假設根節點設置了font-size=32px 那麼1em=32px、0.75em=24px。無論在哪一個地方單位換算的規則都是不會變的。

如何跟設計圖對接

設計圖上的單位是px，咱們如何轉換成em呢，難道用計算器嗎？
這裏有個單位換算小工具，它是換算em的，可是你也能夠用它來換算rem，只要把基礎像素設置成根節點字號就好了。可是基礎像素應該設置成多少呢？

我看了小米的wap頁面，他們作了一個媒體查詢表，根據不一樣分辨率設置根目錄的字號。這樣就能夠實現自適應了！它是直接寫在頁面上，模擬手機看源碼吧view-source:http://m.mi.com/v2.html。下面是格式化後的部分代碼：

@media only screen and (max-width: 300px) {
  html {
    font-size: 8.33333px
  }

  .viewport {
    max-width: 300px
  }
}
@media only screen and (max-width: 310px) and (min-width: 300px) {
  html {
    font-size: 8.33333px
  }

  .viewport {
    max-width: 310px
  }
}
@media only screen and (max-width: 320px) and (min-width: 310px) {
  html {
    font-size: 8.61111px
  }

  .viewport {
    max-width: 320px
  }
}
@media only screen and (max-width: 350px) and (min-width: 320px) {
  html {
    font-size: 8.88889px
  }

  .viewport {
    max-width: 350px
  }
}
@media only screen and (max-width: 360px) and (min-width: 350px) {
  html {
    font-size: 9.72222px
  }

  .viewport {
    max-width: 360px
  }
}
……

棒棒噠有木有！這時候咱們根據這個表來設置基礎像素，好比設計圖的寬度是640px，咱們看它這個表，能夠看到html對應的font-size值是17.77778px，那麼基礎像素就是這個值，而後咱們根據設計圖量出來的px長度轉換成em、rem單位了！

有沒有更智能的方式？

爲何每次都要經過小工具去換算單位呢，有沒有辦法讓單位自動換算的？
直接用css固然是行不通的，雖然它有calc()這個屬性，可是兼容性不強。咱們配合CSS預編譯來作呢，less、sass、stylus，不是可讓css有運算能力嗎。
以後我發現了百度EFE團隊開發的基於less的est框架裏面就包含了這功能。

推薦下本身的

第一次用了est，就發現了bug，@margin-rem()方法用不了，而後我打開它的less源文件想去修改一下的，發現它的實現方式一點都不優雅！主要由於less語言能力太弱了。改好以後又遇到幾個其它方法的坑，遂打算本身寫一個，反正也不難。

我最早嘗試使用sass來寫的。它是基於ruby環境的，這個我就不計較了，反正安裝方式跟node同樣簡單，安裝子。後來發現它居然不支持正則，還能不能好好玩耍了？

最後就用了先進的stylus。它是基於node環境，適合咱們前端的開發環境，不錯。

而後我就模仿了est開發了本身的qst，自我感受良好，已經在兩個項目中實踐了。

相關連接

• 小米wap網站：http://m.mi.com
• 單位換算小工具：http://pxtoem.com/
• qst樣式工具庫：https://github.com/xjchenhao/qst