移动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等）先封裝一段計算，再去調用這段計算就不需要手動換算
希望以上方法能有點幫助，請指正
（順帶附上各種主流移動設備的參數查詢鏈接，點擊這里進入）
總結
- 上一篇： module ‘gast‘ has no
- 下一篇： 45个有用的JavaScript技巧，值