CSS的长度单位适配方案

三种不同的长度单位:px,em,rem
利弊
使用px的话，基本上页面元素的字体大小都是固定的，甚至修改起来也很麻烦。而用em就能解决适配的问题，但坏处是每个大小都是相对父元素的，一旦某个节点有所变动，很容易造成其他节点也要变动，而且本身不是特别直观，单看某个节点是1em并不能得到它的具体大小。而rem基本是最优方案了，既可以很好地适配，也可以直观地修改。


方案：
我们在代码中使用px并以统一的规范来实现界面，根据不同的屏幕定制不同的基础字体大小，并在构建时将px转为rem让其适配不同的屏幕。
其实一般我们都需要额外定制html标签的字体大小，不让其转换，这样会更显得直观一点。
var postcss = require('gulp-postcss');
var pxtorem = require('postcss-pxtorem');
var options = {
      rootValue: 10,
      propWhiteList: [],
      minPixelValue: 1
};
gulp.src('www/*.css').pipe(postcss([pxtorem(options)])).pipe(gulp.dest('build/'));


微信提供了posthtml-px2rem的方案来解决inline-style的问题，但不处理html中的style标签
gulp-posthtml、posthtml-postcss、postcss-pxtorem，流程基本就是处理html中的css中的px，这里会统一把inline-style一起解决
var posthtml = require('gulp-posthtml');
var posthtmlcss = require('posthtml-postcss');
var pxtorem = require('postcss-pxtorem');
var options = {};
gulp.src('www/*.html').pipe(posthtml([posthtmlcss([pxtorem(options)])])).pipe(gulp.dest('build/'));




文／coltfoal（简书作者）
原文链接：http://www.jianshu.com/p/eb237e2c0ecf