px2rem.png
官方例子 https://www.npmjs.com/package/postcss-px2rem
gulp脚手架下
安装gulp-px2rem-plugin模块
npm install gulp-postcss --save-dev
gulpfile.js文件内处理
var gulp = require('gulp');var postcss = require('gulp-postcss');var px2rem = require('postcss-px2rem');
gulp.task('default', function() { var processors = [px2rem({remUnit: 75})]; return gulp.src('./src}我们知道现在iphone大多数型号都用上了retina屏，而retina屏的分辨率相较于普通屏幕增加了一倍，也就是说原来1个像素宽度的区域内可以塞进2个像素了。我们css写的1px是一个概念像素，在retina屏的实际设备上占了2px的位置。
而对于手机屏幕整体来说，一个标注了750宽的手机（iPhone6）在css中只需要375px就能表示
scale缩放
全能型写法
@media (-webkit-min-device-pixel-ratio: 2){
.border-bottom::after {
border-bottom-width: 1px;
}
.border:after { content: ' '; display: block; position: absolute; top: 0; right: -100%; bottom: -100%; left: 0; border: 0 solid #e1e1e1;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
pointer-events: none;
-webkit-transform: scale(.5); transform: scale(.5); width: 200%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}
满足一般需求可以使用这个
@media (-webkit-min-device-pixel-ratio: 2)
.border:after { height: 1px; content: ''; width: 100%;
border-top: 1px solid #e1e1e1;
position: absolute; bottom: -1px; right: 0; transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
}
作者：AkiraSun
链接：https://www.jianshu.com/p/e96ccb603a50
