移动端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相关的教程，这是第一次写前端的文章，写得很差或有错误请多交流，谢谢！