寫在前面，一直被頁面適配的問題困擾，這段時間查了一些資料自己做個總結，可能會有點亂，儘量清晰，我也還在學習摸索，歡迎討論和指正。

    不同的瀏覽器、不同的螢幕大小，所呈現的頁面佈局都是有差別的，但是我們希望不管在什麼瀏覽器、什麼螢幕上，使用者看到的頁面都儘量統一。頁面佈局相容適配的問題，主要依賴單位。我們一般寫px，那麼100px的寬度在1000px的螢幕上是十分之一，但是在200px的螢幕上就是二分之一，所以要實現頁面適配，我們必須尋求px的替代。

一、影響頁面佈局的因素

    首先，明確影響頁面佈局的幾個主要因素

    1

    我在win10系統下，不同的縮放比例，測試了一些瀏覽器的width，這裡的width是通過$(window).width()獲取的寬度。縮放會影響視窗尺寸

    2、螢幕尺寸不同

    我們會遇到很多不同大小的顯示屏，頁面顯示都存在差異。

    3、移動裝置與PC裝置不同

    移動裝置與PC端的不同，最主要的是DPR（DPR的概念在下面會說）不同，一般PC端的DPR為1，移動裝置現在基本採用高清屏，DPR都比1大，例如蘋果iphone4以上都是2。

二、一些常見的名詞viewport rem vw dpr

    先說幾個經常見到的關於頁面適配、移動佈局等的名詞引數

    1、viewport

    在最初考慮移動頁面適配的時候，很多人都會用到一句程式碼

<meta name="viewport" content="width=device-width,initial-scale=1.0">

    content有六個通用屬性

    width: 設定layout viewport的寬度，正整數或字串 'width-device'

    initial-scale: 設定頁面的初始縮放值，數字或小數

    minimum-scale：允許使用者的最小縮放值 數字或小數maximum-scale: 允許使用者的最大縮放值 數字或小數

    height: 設定layout viewport 的高度，這個屬性很少用到

    user-scaleabel: 是否允許使用者進行縮放

    關於viewport的深入理解可以參考這篇文章，講的很詳細

    http://www.cnblogs.com/2050/p/3877280.html

    meta viewport標籤是為了解決移動端適配的問題，不使用該標籤，頁面會縮的很小，不利於使用者閱讀。如果我們希望，比如字型，在移動裝置上使用者看到的字型大小和電腦上看到的差不多，那麼就要採用這個標籤。

2、em、rem

    em和rem都是相對單位，都是為了移動端適配，它們可以使我們的頁面設計更加靈活。em相對於父級元素，如果沒有父級元素，那麼就相對於瀏覽器的預設字型大小，這時對應的是body的字型大小，一般是16px，即1em=16px，也可以自定義。

    body {
      font-size: 20px;
    }

    rem相對於html根元素，預設也是16px，1rem=16px，對應的是html的字型大小，可以自定義

    html {
        font-size: 20px;
    }

    em和rem對比，em會被父級元素影響，多層巢狀之後會變得很複雜，比如一級元素20px，二級元素1.5em，那麼三級元素的1em其實是1*1.5*20=30px，而不是20px，這樣會帶來很多麻煩，必須仔細管理各層級之間的關係。而rem是相對於根元素的，子元素的標準都是統一的，便於管理，所以在em和rem之間，選擇rem做移動端適配更好。

3、vw vh

    vw：視窗寬度的百分比（1vw 代表視窗的寬度為 1%，整個視區寬度就是100vw）

    vh：視窗高度的百分比

    vmin：當前 vw 和 vh 中較小的一個值

    vmax：當前 vw 和 vh 中較大的一個值

    vw、vh是直接由你看到的螢幕大小決定，它們和%不一樣，%是相對於父級元素的，就像rem和em的區別一樣。

    現在大家更傾向用vw去解決移動端適配，移動端對height的要求比較弱，vh不用考慮太多 

4、devicePixelRatio

    devicePixelRatio ，它是裝置上物理畫素和裝置獨立畫素( device-independent pixels (dips) )的比例，即

 devicePixelRatio = 螢幕物理畫素/裝置獨立畫素

    DPR的詳細理解可以參考以下兩篇文章

    https://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

    http://www.cnblogs.com/PeunZhang/p/3441110.html

    裝置獨立畫素：css的px就可以看做裝置的獨立畫素。所以我們可以知道css中的1px並不等於裝置的1px，我們需要考慮dpr的值。

    螢幕物理畫素：可以認為對應我們熟知的螢幕解析度。以iphone為例，iphone3的解析度是320*480，iphone4的解析度是640*960，但是他們的獨立畫素都是320，所以iphone3的DPR是1，iphone4的則是2。

    這裡就要提到Retina屏，retina最早由蘋果提出來，後來很多廠商推出的高清屏都是在蘋果的基礎上發展來的，iphone4及以後的機型都採用retina屏，特點是高畫素密度，同樣大小的螢幕上顯示的畫素點由1個變為多個。

    因為DPR為2，所以在DPR為1的裝置上的圖片到DPR為2的裝置上，1px代表的物理畫素比以前多了一倍，圖片會被放大，一些小圖就會變模糊。所以移動端會考慮載入一張兩倍的圖片。

    一般電腦的DPR都是1，在電腦上不用考慮dpr的影響，檢視裝置的DPR可以通過window.devicePixelRatio獲取

三、根據自己需要採用不同解決方案

    以上這些名詞概念看下來可能有點不明白，下面好好整理一下自己的思路

    首先明確自己需要什麼，適配主要分為兩部分，PC端適配和移動裝置適配。PC端因為不同的瀏覽器和螢幕尺寸，造成頁面上的差別；移動裝置的螢幕更是多種多樣。你是僅僅需要讓自己的專案適配不同的電腦螢幕和瀏覽器，還是要同時考慮移動裝置的適配。

1、只考慮PC端適配

    那麼其實viewport、rem、DPR都不需要考慮，你只要考慮怎麼讓你的頁面在不同大小的顯示屏、瀏覽器上，使用者看到的內容佈局不要差異太大。採取的方法有很多種，比如不要用px來處理所有內容，尤其是涉及到絕對定位的元素。

2、移動裝置適配

    移動裝置的適配有兩個大類的解決方案

    第一，移動端和PC端共用一套程式碼。第二，移動端和PC端使用不同的程式碼。兩種方案各有優劣，第一種只用一個資源，維護成本低，但是需要適配不同的裝置，尤其是要同時考慮PC端和移動裝置的相容，處理起來十分麻煩；第二種，需要兩套資源，維護成本高，但是可以根據不同終端推送不同頁面，適配上處理起來更簡單，比如，我們在電腦上使用www.test.com的資源，在手機上使用m.test.com的資源，如果是在手機上開啟www的資源，判斷使用者使用的是手機，就會跳轉到m的資源，實現方法是在www的程式碼head中加入判斷

      if ( (url.indexOf("www.test.com") != -1) && navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i) ) {
        // 註釋這部分是考慮到子頁面的跳轉，那麼在路徑相同的情況下，直接將www改為m，就可以實現資源轉換
        // var newUrl = url.replace("www", "m")
        // location.href = newUrl;
        location.href = "http://m.test.com";
      }

    兩種方案沒有誰比誰好，根據實際專案需求及複雜程度選擇。

四、後語

    這些適配的問題，只說概念是很抽象的，要結合到具體的專案使用中去，我也在不斷學習。