最近這幾個星期在學到了移動端H5頁面適配，以前根本沒做過移動端網頁，所以把我學到的小知識點寫下來，也分享給前端新手們。
做移動端網頁和pc端很大不同的便是現在移動端窗口分辨率繁多。
很多時候UI給的設計圖只有一份，還是按照iphone6設計的，這就讓前端適配其他例如6plus或安卓等其他移動端頭疼。
還好，阿里巴巴2015年底公開了其成熟的適配方案，lib-flexible，至於其可靠性可參考每年天貓活動的移動端頁面。
這個方案的用法大概是這樣的，HTML 頭部引入 lib-flexible 的樣式和js庫，容器或組件寬高主要使用單位 rem ，字體大小則不變仍然使用單位 px。
然而我們在實際的開發中ui給出的圖一般都是750X1334的，其實iphone6的像素和ui設計的像素是一樣大小的，但是我們的開發如果都是按照6的px來設計，那麼我們的其它比6小尺寸屏幕的所有設備都會面臨width不夠的問題。flexible就完美的解決了這個問題。
應用中我們只要設置好他的公共比的像素就ok了，比如說如果ui圖的像素是750，那我們需要的就是750/10，我們需要的就是75，我們所有的width的固定px就都可以變換成用rem像素代替實現樣式統一例如我們width需要200px那麼我們就可以這樣寫：
width＝200rem/75；從而實現樣式的兼容（特別注意：因爲css不支持樣式的計算，我們需要用less活着sass類似的css編譯執行就可以得到最終的rem的值了）
另外，我們根據不同dpr可以設置一些不同的樣式來實現視網膜屏幕的高清屏幕！
[data-dpr="1"] .selector {
width: 10px;
height: 32px;
font-size: 14px;
}
[data-dpr="2"] .selector {
width: 20px;
height: 64px;
font-size: 28px;
}
我們根據不同的自定義屬性data-dpr來設置不同的width和height 從而達到不同dpr屏幕具有不同的屬性！（這個位置一般用來處理圖片。。）