移動web的適配
我在另一篇文章中談到過一些移動端解析度自適應問題，主要是基於個人實際開發中遇到的問題提出的解決方法。
近期有幸聽到他人對移動web開發的分享，特來補充上一篇文章，向大神討教。
Part 1 理解關於長度單位的一些概念
1、裝置畫素或邏輯畫素
指裝置能控制顯示的最小物理單位，意指螢幕上一個個的點
（還是不理解？？太正常了，接著往下看）
2、CSS畫素或裝置獨立畫素
指CSS樣式程式碼中使用的邏輯畫素，即px（在iPhone中單位為pt）
（這個好理解吧）
3、畫素密度（PPI）
指裝置能控制顯示的最小物理單位，意指螢幕上一個個的點
（嘻嘻，=裝置畫素或邏輯畫素）
PPI越高，解析度也就越高
4、畫素比（dpr）
裝置畫素比=裝置畫素/CSS畫素
比如：iPhone6的畫素比為2 = 750/375
在開發中，UI設計獅以裝置畫素製作設計圖；
前端攻城獅把裝置畫素按照畫素比進行換算，得到CSS畫素，以此為單位制作網頁
進一步舉例理解，在普通屏和2dpr下，css畫素和裝置畫素的情況
以下兩種情況都會帶來一定的圖片不正常的問題
Part 2 關於視口的概念
1、Layout viewport（佈局視口）
瀏覽器預設設定了一個viewport 元標籤，定義一個的虛擬視口，用於解決早期的頁面在手機上顯示的問題。iOS, Android基本都將這個視口解析度設定為 980px，所以pc上的網頁基本能在手機上呈現，只不過元素看上去很小，一般預設可以通過手動觸控方式縮放網頁。
2、Visual viewport（視覺視口）
物理螢幕的可視區域，螢幕顯示器的物理畫素。同樣尺寸的螢幕，畫素密度大的裝置，硬體畫素會更多。（如手機螢幕iPhone6為375px）
3、Ideal viewport（理想視口）
通常是我們說的螢幕解析度
他們之間的關係總結一句話：改變佈局視口，讓視覺視口達到理想視口
（若小於視覺視口就會出現滾動條）
Part 3 移動端適配的解決方案
一般我們會先在<head>標籤中加<meta name=“viewport”>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
其中，width設定佈局視口的寬，initial-scale設定頁面的初始縮放程度，maximum-scale設定了頁面的最大縮放程度，minimum-scale設定了頁面的最小縮放程度，user-scalable即是否允許使用者對頁面進行縮放操作
下面介紹幾種更好的適配方案，重點來了！！！
1、@media媒體查詢
具體百度即可查到，不贅述
弊端：要根據不同的手機寬高作窮舉，特別對於各種各樣的Android手機，要窮舉太多
2、淘寶方案flexible.js
淘寶前端團隊自己做了一套能適配的flexible.js，這個要在<body>前引入，不需要另外引入<meta name=“viewport”>
弊端：檢視原始碼（原始碼）可以看到，在flexible.js中1rem=75px，這樣我們在開發時要用rem，每次換算都很麻煩，比較除以75很容易除不盡之類的
解決方案：可以將原始碼改一下，改成width/7.5或者width/10，方便計算
3、動態設定rem
提到上面的改原始碼，其實質就和這個方法很類似了。這個方法就是我在移動端解析度自適應問題這篇文章中談到的，自己寫js去動態設定rem，不同的是這裡要加<meta name=“viewport”>，附上一段比較完整的js程式碼
4、使用vw、vh單位
這是一組新的單位，規定1vw=視口寬度1%；1vh=視口高度1%
弊端：例如設計圖是按照750px做的，而元素的寬為600px，那麼就要用600/750*100vw=80vw得到我要寫在程式碼中的數值，顯然還是一個問題：不好算！
解決方法：可以用CSS預編譯器（如less等）先封裝一段計算，再去呼叫這段計算就不需要手動換算
希望以上方法能有點幫助，請指正
（順帶附上各種主流移動裝置的引數查詢連結，點選這裡進入）