首先，我本质上是一名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相关的教程，这是第一次写前端的文章，写得不好或有错误请多交流，谢谢！