首先，我本質上是一名UI設計師，但對前端也是頗感興趣，很多靜態頁面及一些動畫效果都由我來實現，邏輯和資料部分交給其他程式大大，我的攻略方向主要還是視覺上為主。
我一直使用px、em、rem單位作為移動端開發的常用計量單位，不過時常還是要做一些媒體查詢適配每個不同解析度的手機。
有時真的覺得挺麻煩，就沒有一種只需寫一次就能完美適配所有手機的嗎？
我好像發現了新大陸，至於準不準確，還要靠各位多測試，反正我測過的99.99%準確。
我們先在ps裡建立一個iPhone6的畫板，解析度是750x1334px，然後隨便畫一個矩形，注意數值：
我特意取了一個偶數，一個奇數，來辨別pt這個單位的準確度。
然後建立一個基本的移動端html結構，
meta裡通常情況下是寫<meta name=”viewport content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″”>，但這個方法只需寫content=”user-scalable=0″，只讓頁面不讓縮放，這是關鍵。
然後在樣式表裡我們不寫px，我們直接根據UI上的px 1：1轉成pt來寫：
*{margin:0; padding:0;}
body{background: blue;}
div{width: 332pt; height: 203pt; margin: 114pt 0 0 337pt; background: red;}複製程式碼這時會得出這樣的結果
把瀏覽器渲染的圖與UI設計圖疊加對比看看結果
結果發現位置基本相同，但瀏覽器渲染的紅色矩形比UI裡的黑色矩形大了一點點，不過結果已經差不多出來了，只要再調整一下即可！
既然UI裡的畫布寬是750px，那麼如果我把頁面寫成寬是750pt會怎樣呢？
750pt在瀏覽器裡渲染成1000px了
然後再看看body本身的寬度
原來如此！750pt本身已經超出畫布的範圍了，那麼是不是隻要將750pt按照body的100%寬度換算一下就可以了呢？我們再來測試一下。
沒錯，完美，已經跟body的預設寬度一樣是980px了！
通過測試確定735pt就是980px，735/750=0.98，按照這個結果，就是將所有數值都乘以0.98即可，我們再來測試一下：
div{width: 325.36pt; height: 198.94pt; margin: 111.72pt 0 0 330.26pt; background: red;}複製程式碼嗯，完美重合，1畫素都不多！
但為了準確性，我們再來看一下能否做到兩個矩形通過固定數值達到水平佈局並且寬度都是頁面的50%，也就是說，假如UI是750px寬，那麼50%寬應該是375px，換算成pt應該是375*0.98=367.5pt，let`s do it：
<dl>
<dt style="background: yellow"></dt>
<dt style="background: purple"></dt>
</dl>複製程式碼dt{width: 367.5pt; height: 367.5pt; float: left;}複製程式碼OK，真的完美實現50%寬，而且瀏覽器也將dt的367.5pt渲染成490px（980px/2）！無論將瀏覽器渲染成iphone 6 7 8 x 還是plus都成功！
根據這些結果，我又拿了一些實際專案中的UI圖來測試，結果除了在文字上有一丁點位置偏差外，其他基本也是與UI設計圖一模一樣。
可能有童鞋會問，每次都要乘0.98會不會很麻煩。覺得麻煩的可以找一下sublime text有個大神寫的外掛叫cssrem-master，這個外掛是通過特定引數將px轉換成rem，我利用這個外掛改寫了成pt模式，馬上就解決了這個問題。
下面是px轉rem這個外掛的受用方法，是不是很過癮！？px轉pt同樣也是這樣，把rem全部替換成pt，再在換算那裡改寫一下就OK了。
不知道這個px轉pt的方法算不算新大陸，反正對我來說是的，但有幾點條件必須要滿足：
- meta裡通常情況下是寫<meta name=”viewport content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″”>，但這個方法只需寫content=”user-scalable=0″；
- 0.98這個係數只適合在UI設計圖為750px寬的畫布(即iPhone6，@2x)使用，如果UI設計圖為640px，請先轉換為750px；
- 文字不能保證99.99%與UI設計圖一樣，但至少90%是一樣的。
至於這個方法可不可行，有興趣的童鞋可以嘗試一下。
但這裡我有一個疑惑點，為什麼只要將瀏覽器變成手機模式，無論是iPhone6還是iPhone6 Plus，body的預設寬度就是980px呢？知道的童鞋麻煩請告訴一下我，我就不去研究了。。。
以前都是寫UI相關的教程，這是第一次寫前端的文章，寫得不好或有錯誤請多交流，謝謝！