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

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

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

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

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

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

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

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

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

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

這時(shí)會(huì)得出這樣的結(jié)果

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

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

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

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

然后再看看body本身的寬度

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

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

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

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

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

但為了準(zhǔn)確性，我們?cè)賮?lái)看一下能否做到兩個(gè)矩形通過固定數(shù)值達(dá)到水平布局并且寬度都是頁(yè)面的50%，也就是說(shuō)，假如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，真的完美實(shí)現(xiàn)50%寬，而且瀏覽器也將dt的367.5pt渲染成490px（980px/2）！無(wú)論將瀏覽器渲染成iphone 6 7 8 x?還是plus都成功！

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

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

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

不知道這個(gè)px轉(zhuǎn)pt的方法算不算新大陸，反正對(duì)我來(lái)說(shuō)是的，但有幾點(diǎn)條件必須要滿足：

meta里通常情況下是寫<meta name="viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"">，但這個(gè)方法只需寫content="user-scalable=0"；

0.98這個(gè)系數(shù)只適合在UI設(shè)計(jì)圖為750px寬的畫布(即iPhone6，@2x)使用，如果UI設(shè)計(jì)圖為640px，請(qǐng)先轉(zhuǎn)換為750px；

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

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

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

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

總結(jié)

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

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