一 移動裝置尺寸多種多樣，帶來適配難度，有時甚至無從下手。
1 移動裝置上的Px 畫素不等於裝置的物理畫素。
iphone 6 作為開發標準裝置不等於裝置的物理畫素。
iPhone 5 物理寬度320
iPhone6s 物理寬度為414
Android 裝置物理寬度在iphone裝置的寬度範圍之內或者附近
物理畫素不等於css px畫素，因為有retina屏，甚至3倍 retina屏。
retina螢幕 一個物理畫素等於兩個CSS畫素
<meta name=”viewport” content=”width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no”>
移動端頁面，首先必學申明 viewport屬性 ，告知頁面我們使用裝置的寬度等於我們處理頁面的整寬度。
二 淘寶flexible 解決方案，所有移動裝置全相容，贊
1 首先，引入
<script src=”http://g.tbcdn.cn/mtb/lib-fle…
2會給html標籤新增 data-dpr=”2″ 根據裝置新增 螢幕畫素比，區分普通螢幕 retina螢幕 3倍retina屏
html font-size會設定為螢幕寬度的十分之一，不同裝置不一樣，但是都是十分之一。
3 rem 技術方案
所有元素的尺寸大小，邊距，行高 等於都是用了rem 相對寬度來表達
整個頁面的寬度是 10rem 1rem就等於螢幕寬度十分之一 這樣就為不同移動裝置頁面開發帶來了方便的等比縮放能力。所有元素的大小設定都使用針對html標籤的font-size 比例來計算。
1rem=html font-size =screen width /10 = flexible.js 提供
三 如何計算元素大小，寬高
1rem = 螢幕寬度/10
在現實之中，設計師是按照750畫素寬度來設計頁面的。
因為理想的機型是iPhone 6 375dp 物理畫素的寬 ，retina屏就是750px(css)
750px=10rem 針對設計稿
我們使用PS 量出的畫素/750*10 = 最終的rem
Photoshop畫素/75 = em