移動頁面兼容性佈局

閒來無事，整理下目前常見的移動端頁面佈局。主要有流式佈局、響應式佈局、固定寬度作法、設置viewport進行縮放、rem等比例適配等。下文只是我的及網絡上對各佈局的見解，若有不當之處或其它方法，可回覆。
     一、流式佈局
     流式佈局的解決方案有很多弊端，它雖然可讓各類屏幕都適配，可是顯示的效果極其的很差，由於只有幾個尺寸的手機可以完美的顯示出視覺設計師和交互最想要的效果。在頁面佈局的時候都是經過百分比來定義寬度，可是高度大都是用px來固定住，因此在大屏幕的手機下 顯示效果會變成有些頁面元素寬度被拉的很長，可是高度仍是和原來同樣，實際顯示很是的不協調，這就是流式佈局的最致命的缺點，每每只有幾個尺寸的手機下看 到的效果是使人滿意的，其實不少視覺設計師應該沒法接受這種效果，由於他們的設計圖在大屏幕手機下看到的效果至關因而被橫向拉長來同樣。

流式佈局並非最理想的實現方式，經過大量的百分比佈局，會常常出現許多兼容性的問題，還有就是對設計有不少的限制，由於他們在設計之初就須要考慮流式佈局對元素形成的影響，只能設計橫向拉伸的元素佈局，設計的時候存在不少侷限性。

      二、固定寬度作法

      還有一種是固定頁面寬度的作法，早期有些網站把頁面設置成320的寬度，超出部分留白，這樣作視覺，前端都挺開心，視覺在也不用被流式佈局限制本身的設計 靈感了，前端也不用在搞坑爹的流式佈局。可是這種解決方案也是存在一些問題，例如在大屏幕手機下兩邊是留白的，還有一個就是大屏幕手機下看起來頁面會特別小，操做的按鈕也很小。

    三、響應式佈局

    響應式這種方式在國內不多有大型企業的複雜性的網站在移動端用這種方法去作，主要緣由是工做大，維護性難，因此通常都是中小型的門戶或者博客類站點會採用響應式的方法從web page到web app直接一步到位，由於這樣反而能夠節約成本，不用再專門爲本身的網站作一個web app的版本。

    四、設置viewport進行縮放

    以一個固定寬度爲基準，進行縮放，這個方法簡單粗暴，又高效。說實話我以爲他和用接下去咱們要講的rem都很是高效，不過有部分同窗使用過程當中反應縮放會致使有些頁面元素會糊的狀況。 手機瀏覽器是把頁面放在一個虛擬的「窗口」（viewport）中，一般這個虛擬的「窗口」（viewport）比屏幕寬，這樣就不用把每一個網頁擠 到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的佈局），用戶能夠經過平移和縮放來看網頁的不一樣部分。移動版的 Safari 瀏覽器最新引進了 viewport 這個 meta tag，讓網頁開發者來控制 viewport 的大小和縮放，其餘手機瀏覽器也基本支持。爲了在不一樣手機、不一樣系統、不一樣瀏覽器和不一樣的屏幕尺寸間自適應頁面，咱們須要根據手機類型、系統類型、瀏覽器類型、屏幕尺寸動態的設置頁面的viewport的值。

    以前作的一個項目中手機頁面所用到的兼容性方案就是如此，在項目測試中遇到了縮放比例難以調控的問題：要根據手機品牌、系統類別、瀏覽器類別等來設置縮放比例，手機品牌、系統類別、瀏覽器類別目前只能經過瀏覽器的navigator.userAgent中的信息來截取到的，但一些非主流瀏覽器沒法獲得某些參數，而且手機品牌型號參數變幻無窮，甚至瀏覽器的版本、手機系統版本的不一樣形成的縮放效果也不盡相同。在兼容性方面存在風險。

    五、rem等比例適配

    rem是經過根元素進行適配的，網頁中的根元素指的是html咱們經過設置html的字體大小就能夠控制rem的大小。設置元素高度、寬度、字體大小等屬性的單位爲rem,在不一樣屏幕分辨率下只設置html的字體大小就能夠控制其它元素來達到兼容性的效果。能夠經過響應式或JS來動態設置html字體 大小。

 

   我目前項目中採用的是頁面寬度用流式作，高度字體等用rem做爲單位，經過響應式來控制rem根元素大小，實驗效果仍是可行的。