說到移動端適配，首先我們需要先搞清楚一些基礎知識，所以本文路線是先了解畫素，dpr，視口等基礎知識，然後再整理出移動端適配方案。
畫素其實分為兩種，分別是物理畫素和css畫素
物理畫素（裝置畫素）
物理畫素，顧名思義，顯示屏是由乙個個物理畫素點組成的，通過控制每個畫素點的顏色，使螢幕顯示出不同的影象，螢幕從工廠出來那天起，它上面的物理畫素點就固定不變了，單位pt。
通常我們看一些電子裝置的引數，比如解析度用的就是物理畫素。它配合螢幕尺寸（注意：螢幕尺寸通常是說螢幕的對角線長度），可以計算出ppi（每英吋畫素取值），即每一英吋物理畫素數量。ppi越高，說明螢幕能提供更多細節。
css畫素
css和js使用的抽象單位，瀏覽器內的一切長度都是以css畫素為單位的，css畫素的單位是px。
物理畫素和css畫素之間的關係(***x，dpr)
在非高清屏及未縮放的狀態下，乙個css畫素等於乙個物理畫素，而在一些ppi非常高的螢幕（例如蘋果的視網膜螢幕）上，如果還讓乙個css畫素等於乙個物理畫素，就會導致網頁上的元素變得非常小，因此高ppi屏下，通常乙個css畫素等於兩個甚至三個物理畫素（由瀏覽器廠商決定，不同瀏覽器設定的值可能不同）。如果乙個css畫素占用n個物理畫素，那麼我們就說此時的***x(dots per px)為n。
所以，我們可以用***x描述物理畫素和css畫素之間的關係。***x除了和ppi有關，也和當前縮放狀態有關，舉個例子，在非高清屏下，如果沒縮放，乙個css畫素占用乙個物理畫素，此時是1***x，但如果將頁面放大到200%，此時乙個css畫素等於兩個物理畫素，即2***x。
dpr（裝置畫素比，devicepixelratio）描述的是未縮放狀態下，物理畫素和css畫素的初始比例關係，計算方法如下圖。
dpr由瀏覽器廠商決定，我們無法修改，但可以通過window.devicepixelratio讀取dpr。
可能有人疑問dpr和***x到底啥關係，我們可以認為dpr描述的是未縮放狀態，而***x可以描述任意時刻的狀態，未縮放狀態下的***x和dpr相等，當有縮放操作時，此時的物理畫素和css畫素的比例關係就只能用***x描述了。
視口也叫作初始包含塊，之所以叫這個名字，是因為它包含了元素，它的寬度是所有css百分比寬度推算的根源。
在桌面瀏覽器，視口的寬度等同於瀏覽器視窗的寬度，高度即為瀏覽器視窗的高度。但移動端就有點複雜了，移動端的視口分為布局視口和視覺視口。
布局視口（layout viewport）
說布局視口之前，我們先說一下桌面端的頁面放到移動端瀏覽器後出現的問題：由於早期的頁面很多採用固定寬度的布局，導致放在移動端的小視窗下出現橫向的滾動條，不便於使用者檢視，所以瀏覽器廠商研究出了布局視口。布局視口的寬度一般在768px~1024px（由瀏覽器廠商設定），常見寬度980px，雖然設定了很大的寬度，但在沒有手動設定寬度的情況下，布局視口仍會容納在一屏裡（說白了，就是把980px的東西裝在320px的螢幕裡），這樣，瀏覽器會避免出現橫向滾動條。
設定布局視口寬度："viewport" content="width=640">
獲取布局視口寬度：document.documentelement.clientwidth
視覺視口（visual viewport）
使用者正在看到的網頁的區域，大小是螢幕中css畫素的數量。
獲取視口寬度：window.innerwidth/height理想視口
當布局視口的寬度達到理想狀態時，就是理想視口，理想視口中的頁面有最理想的寬度，使用者進入頁面不用縮放。
實現方法：
name="viewport"
content="width=device-width">（即設定布局視口寬度為裝置寬度）
縮放會影響布局視口的大小，因為瀏覽器會盡量讓布局視口鋪滿螢幕，所以當我們設定scale=0.5時，布局視口的寬度會自動變為原來的兩倍。
具體如下圖所示。
name="viewport"
content="width=device-width,initial-scale=1.0">
console.log(document.documentelement.clientwidth); //結果為375
script>
name="viewport"
content="width=device-width,initial-scale=0.5">
console.log(document.documentelement.clientwidth); //結果為750
script>
使用縮放的好處：對於dpr為2或更高的螢幕，如果不做縮放操作，我們所能控制的最小物理畫素粒度是2pt或更多物理畫素，這樣帶來了兩個問題。
解決這兩個問題的方法就是縮放，我們把scale設定為1/dpr。
meta.setattribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');固定高度，寬度自適應
即垂直方向使用固定大小，水平方向使用百分比，flex。
name="viewport"
content="width=device-width,initial-scale=1">
固定寬度，viewport縮放
開發頁面時完全按照和設計圖1:1的比例開發，設計圖，頁面，視口寬度使用同乙個寬度，單位使用px即可，由於瀏覽器會盡量將布局視口鋪滿全屏，所以瀏覽器會自動幫助我們縮放。舉個例子，假設設計圖是640px寬，那我們這樣設定。
name="viewport"
content="width=640">
rem做寬度，viewport縮放
根據螢幕寬度設定rem值，需要適配的元素都使用rem為單位，不需要適配的元素還是使用 px 為單位。
總共分兩步：
第二步是對頁面適配的優化，修改scale是為了解決前面說到的1px border問題。
**的flexible使用的就是這種方案，而且它加了data-dpr屬性，這樣我們就可以根據不同的dpr設定不同的樣式。
方案一比較適合列表這種比較固定的結構，方案二適合的場景比較多，而且實現簡單，但需要注意它會將頁面的所有元素都縮放，方案三適合的場景是頁面內有些元素需要適配，有些元素不需要適配。總體來講，方案二和方案三是比較常用的方式。
移動端適配 適配方案總結
通過特定的限制，控制不同樣式的呈現 限制條件最終返回true false，為真，應用其樣式 12 stylesheet media max width 800px href example.css 34 5操作邏輯 only,and,not 你可以使用邏輯操作符，包括not and和only等，構建...
螢幕適配基礎（慕課）
螢幕尺寸 螢幕對角線長度 單位英吋 螢幕解析度 單位px 1920 1080 螢幕畫素密度 每英吋上的畫素點個數 單位dpi nexus 5 螢幕4.95inch 1920 1080 dpi 445 1920 2 1080 2 開根號 4.95 445 px構成影象的最小單位 dp dip 密度無關...
移動端適配
js適配方案 function resizefun else body removeclass hightscreen shortscreen portrait var ratio window width window height if screenstate portrait else if ...