移動端HTML響應式佈局之神奇的pt（自測99.99%與設計圖一致）

首先，我本質上是一名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的方法算不算新大陸，反正對我來講是的，但有幾點條件必需要知足：

1. meta裏一般狀況下是寫<meta name="viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"">，但這個方法只需寫content="user-scalable=0"；
   
2. 0.98這個係數只適合在UI設計圖爲750px寬的畫布(即iPhone6，@2x)使用，若是UI設計圖爲640px，請先轉換爲750px；
   
3. 文字不能保證99.99%與UI設計圖同樣，但至少90%是同樣的。
   

至於這個方法可不可行，有興趣的童鞋能夠嘗試一下。

但這裏我有一個疑惑點，爲何只要將瀏覽器變成手機模式，不管是iPhone6仍是iPhone6 Plus，body的默認寬度就是980px呢？知道的童鞋麻煩請告訴一下我，我就不去研究了。。。

之前都是寫UI相關的教程，這是第一次寫前端的文章，寫得很差或有錯誤請多交流，謝謝！