访客 一般我们在公司开发页面，UI设计图是出750px的图，也就是基于Iphone6设计的图。如果我们用如果得当的配置，UI图上的东西是多少px，我们就写多少px，这是程序员最方便的。但是这个是怎么配置的呢？
不要方，其实很简单，跟着思路走起来~~~
如果不配置，我们在CSS里写多少px才能还原设计图？来举个例子~
假设现在图上有个宽度100px的按钮，UI图是750px的图。
答案是我们应该写100px/2=50px。css里width=50px;就这样。
那为什么是100px除以2呢？？？因为iPhone的dpr=2。
那什么是dpr？dpr的全称是window.devicePixelRatio，它等于物理像素/dips。其实就是一个比例。（物理像素就是一个个的小格子，用来显示不同颜色的。dips可以理解为虚拟像素，就像我们写的css。实在理解不了就忽略吧...）
从iphone4开始，iphone就是dpr就等于2了。所以其实就是把UI图除以2，就是你应该在css写多少px。
是不是很简单~~~
以上是怎么还原设计稿的px单位，那现在又有个问题来了，我们不是所有人都是用的iphone6吧，还是其他各种屏幕大小的手机，比如极端一点的iphone4、iphone6splus...各种各样屏幕大小的手机，难道每个手机上显示一样大小的文字和图片？那好恼火，所以，我们要适配！！！
咋个适配呢？方法就像兵器，各种各样都有，看你自己根据实际情况选哪个，下面是方法：
- 100%布局适配
- rem做适配
- ...
开课咯~，听讲听讲~（敲黑板）
还是来举个上面相同的例子，假设现在图上有个宽度100px的按钮，UI图是750px的图。为了不同大小的屏幕适配，按钮我们应该写多少rem呢？rem就是根元素的字体大小！根元素就是<html>标签。网页<html>的默认字体大小是16px。也就是浏览器默认的字号16px。
换算方式：1rem=16px。所以100px=100/dpr/16=3.125rem。所以按钮的宽度在css里，我们就应该写3.125rem。屏幕上按钮的尺寸跟iphone6的比例就和UI图上一样了。
但是怎么去改变根字体的大小呢？1、用@media媒体查询设置不同屏幕的根字体大小，要写很多css代码,因为屏幕大小那么多，难以一个一个地写全。
2、我推荐写js，几行就搞定
下面就是随着屏幕大小改变根字体大小的js。推荐写在入口页面里，
(function(){functionautoRootFontSize(){document.documentElement.style.fontSize=Math.min(screen.width,document.documentElement.getBoundingClientRect().width)/750*32'px';}window.addEventListener('resize',autoRootFontSize);autoRootFontSize();})();当页面打开和发生变化时，就会执行resize事件，这里面用到了getBoundingClientRect属性（可以上MDN上查），它其实就是返回一个对象的left、top、right、bottom、width、height，单位为像素。（请注意兼容问题，IE8及一下没有width、height）。屏幕宽度和html的宽度取个最小值（其实大部分情况两者是相同的）。移动端通常是除以32，为了让字更大一点，清晰一些。
好啦，根字体随着屏幕大小而变化啦，那么不可能每次写css还要去换算应该写多少rem吧，那么多css，要写哭，所以建议用css预处理器，postcss、less、sass，如果没用过，自行查阅其官方文档。
不要方，其实很简单......下面就介绍我在工作中用到的。
PostCSS是一款使用插件去转换CSS的工具。可以处理CSS，通常是结合webpack这些工具一起使用的。我的项目就是用的webpack，在项目根目录下建一个postcss.config.js文件，项目会自动去读取这些配置类文件，这个js里的内容是：
module.exports={plugins:{autoprefixer:{},'postcss-pxtorem':{rootValue:32,propList:['*'],minPixelValue:2}}};这个plugins就是你要用到的插件，比如这里用到的两个插件autoprefixer、postcss-pxtorem。
autoprefixer就是给css前面加上合适的前缀，这点少写了很多行代码是不是。
postcss-pxtorem就是把px转换成rem，这也就是我们上面根字体改变了，px也可以换算成rem，但是这个插件就可以根据你的根字体，自动换算rem，是不是很方便。
rootValue就是根字体大小，初始设置为32，在移动端更清晰一点。
移动端我们目前就只用到了这2个插件。
上面也说了，要结合webpack使用，那么在webpack里应该怎么写呢？
module:{rules:[{test:/\.scss$/,use:['style-loader','css-loader','postcss-loader','sass-loader']},{test:/\.css/,use:['style-loader','css-loader','postcss-loader']}]}直接在css-loader后面这样加上postcss-loader。就会去处理postcss里的东西，postcss-loader的安装命令：npminstall--save-devpostcss-loader
（上面use数组里面的插件是从右往左依次执行的，最后执行的是style-loader。这个顺序还是有必要知晓一下。）
综上所述，我们达到的效果就是：UI图上是100px，你直接在css里写100px，就是这么简单。不管什么大小的屏幕，字体大小会随之变化，永远都是最合适的大小。并且，打包后的代码，都是有前缀的代码。简直不要太爽。
如果有不对的地方，欢迎指正，希望大家喜欢~~