首先，我本質(zhì)上是一名UI設(shè)計師，但對前端也是頗感興趣，很多靜態(tài)頁面及一些動畫效果都由我來實現(xiàn)，邏輯和數(shù)據(jù)部分交給其他程序大大，我的攻略方向主要還是視覺上為主。

我一直使用px、em、rem單位作為移動端開發(fā)的常用計量單位，不過時常還是要做一些媒體查詢適配每個不同分辨率的手機。

有時真的覺得挺麻煩，就沒有一種只需寫一次就能完美適配所有手機的嗎？

我好像發(fā)現(xiàn)了新大陸，至于準(zhǔn)不準(zhǔn)確，還要靠各位多測試，反正我測過的99.99%準(zhǔn)確。

我們先在ps里建立一個iPhone6的畫板，分辨率是750x1334px，然后隨便畫一個矩形，注意數(shù)值：

我特意取了一個偶數(shù)，一個奇數(shù)，來辨別pt這個單位的準(zhǔn)確度。

然后建立一個基本的移動端html結(jié)構(gòu)，

meta里通常情況下是寫<meta name="viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"">，但這個方法只需寫content="user-scalable=0"，只讓頁面不讓縮放，這是關(guān)鍵。

然后在樣式表里我們不寫px，我們直接根據(jù)UI上的px 1：1轉(zhuǎn)成pt來寫：

*{margin:0; padding:0;} body{background: blue;} div{width: 332pt; height: 203pt; margin: 114pt 0 0 337pt; background: red;}復(fù)制代碼

這時會得出這樣的結(jié)果

把瀏覽器渲染的圖與UI設(shè)計圖疊加對比看看結(jié)果

結(jié)果發(fā)現(xiàn)位置基本相同，但瀏覽器渲染的紅色矩形比UI里的黑色矩形大了一點點，不過結(jié)果已經(jīng)差不多出來了，只要再調(diào)整一下即可！

既然UI里的畫布寬是750px，那么如果我把頁面寫成寬是750pt會怎樣呢？

750pt在瀏覽器里渲染成1000px了

然后再看看body本身的寬度

原來如此！750pt本身已經(jīng)超出畫布的范圍了，那么是不是只要將750pt按照body的100%寬度換算一下就可以了呢？我們再來測試一下。

沒錯，完美，已經(jīng)跟body的默認(rèn)寬度一樣是980px了！

通過測試確定735pt就是980px，735/750=0.98，按照這個結(jié)果，就是將所有數(shù)值都乘以0.98即可，我們再來測試一下：

div{width: 325.36pt; height: 198.94pt; margin: 111.72pt 0 0 330.26pt; background: red;}復(fù)制代碼

嗯，完美重合，1像素都不多！

但為了準(zhǔn)確性，我們再來看一下能否做到兩個矩形通過固定數(shù)值達到水平布局并且寬度都是頁面的50%，也就是說，假如UI是750px寬，那么50%寬應(yīng)該是375px，換算成pt應(yīng)該是375*0.98=367.5pt，let's do it：

<dl><dt style="background: yellow"></dt><dt style="background: purple"></dt> </dl>復(fù)制代碼

dt{width: 367.5pt; height: 367.5pt; float: left;}復(fù)制代碼

OK，真的完美實現(xiàn)50%寬，而且瀏覽器也將dt的367.5pt渲染成490px（980px/2）！無論將瀏覽器渲染成iphone 6 7 8 x?還是plus都成功！

根據(jù)這些結(jié)果，我又拿了一些實際項目中的UI圖來測試，結(jié)果除了在文字上有一丁點位置偏差外，其他基本也是與UI設(shè)計圖一模一樣。

可能有童鞋會問，每次都要乘0.98會不會很麻煩。覺得麻煩的可以找一下sublime text有個大神寫的插件叫cssrem-master，這個插件是通過特定參數(shù)將px轉(zhuǎn)換成rem，我利用這個插件改寫了成pt模式，馬上就解決了這個問題。

下面是px轉(zhuǎn)rem這個插件的受用方法，是不是很過癮！？px轉(zhuǎn)pt同樣也是這樣，把rem全部替換成pt，再在換算那里改寫一下就OK了。

不知道這個px轉(zhuǎn)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這個系數(shù)只適合在UI設(shè)計圖為750px寬的畫布(即iPhone6，@2x)使用，如果UI設(shè)計圖為640px，請先轉(zhuǎn)換為750px；

文字不能保證99.99%與UI設(shè)計圖一樣，但至少90%是一樣的。

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

但這里我有一個疑惑點，為什么只要將瀏覽器變成手機模式，無論是iPhone6還是iPhone6 Plus，body的默認(rèn)寬度就是980px呢？知道的童鞋麻煩請告訴一下我，我就不去研究了。。。

以前都是寫UI相關(guān)的教程，這是第一次寫前端的文章，寫得不好或有錯誤請多交流，謝謝！

總結(jié)

以上是生活随笔為你收集整理的移动端HTML响应式布局之神奇的pt（自测99.99%与设计图一致）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。