2019独角兽企业重金招聘Python工程师标准>>> 
问题
我们遇到了什么问题？
在不同大小和高清的屏幕下：
- 如何保证 界面布局 一致性：不错乱，不变形
- 如何保证 字体大小 一致性：大屏显示更大，小屏显示更小或更多
- 如何保证 1px边框 一致性：不同的高清屏也在正常显示1px的高度大小
- 如何保证 图片清晰度 一致性：不同大小和高清屏下都能看到清晰的图片
- 。。。
几个概念
讨论这个问题之前，要先明白像素的概念。
设备像素(device pixel):
设备像素设是物理概念，指的是设备中使用的物理像素。
比如iPhone 5的分辨率640 x 1136px。
CSS像素(css pixel):
CSS像素是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。
在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px是一个相对单位，相对的是设备像素(device pixel)。
比如iPhone 5使用的是Retina视网膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel，所以设备像素数为640 x 1136px，而CSS逻辑像素数为320 x 568px。
可以我们普通写代码的时候用的是css 像素，但是不同ppi（像素密度）的手机对于css 1px 的”解释“ 是不同的。 比如 iphone6 会用四个像素渲染一个css 像素。如果我们不加区别的写css 像素在不用手机运行的话，会怎么样？ 比如我有一个640 的普通手机 和 iphone6 ， 那么他们渲染同一个1px宽的元素，iphone6 使用的是 2/640 设备宽度。 普通手机使用的是1/640 设备宽度 . 也就说iphone 6 看起来更宽了。怎么解决？ 请往下看。
实施方案
关于高清的显示方案，并不是一个唯一的正确的方案。 高清方案有好多，淘宝的高清方案就和支付宝的不同，更不用说别的方案了。 本文主要讨论目前比较流行的rem 方案。
ant-mobile 采用的是淘宝方案， 1rem = 100px 。 dingui 采用支付宝的方案， 1rem = 75px
由于项目使用antm 的原因，因此介绍下淘宝的高清方案。 高清方案主要点在于，在不同清晰度的手机上都可以更好的展示，不至于在高分辨率手机上会比较小等不一致问题。
主要步骤：
1. 设置 viewport， 动态给html 添加fontSize用于后续rem
2. 写代码还是px， 因此需要px 到 rem 的主动转化工具。不同分辨率手机上显示的rem相同，
但是由于html font-size 不同，因此 rem 对应的css像素不同，但是代表的物理像素相同（这也是我在题头介绍的，高清方案解决的问题）。 我是用的插件是postcss-pxtorem-plugin
webpack中这样配置：
// npm install postcss-pxtorem@^3.3.1 --save-dev
const pxtorem = require('postcss-pxtorem');
webpackConfig.postcss.push(pxtorem({
rootValue: 100, // 750页面 1rem = 100px
propWhiteList: [],
}));3. 高清图片处理
可以看下 手机淘宝前端的图片相关工作流程梳理案：https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Famfe%2Farticle%2Fissues%2F8
参考
https://github.com/ant-design/ant-design-mobile/wiki/antd-mobile-0.8-%E4%BB%A5%E4%B8%8A%E7%89%88%E6%9C%AC%E3%80%8C%E9%AB%98%E6%B8%85%E3%80%8D%E6%96%B9%E6%A1%88%E8%AE%BE%E7%BD%AE
http://www.jianshu.com/p/af6dad66e49a