移动端h5之rem布局／px2rem

理：

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/*.css')
    .pipe(postcss(processors))
    .pipe(gulp.dest('./dest'));
});

• vue-webpack下面
  webpack官方有简单举例

npm install postcss-loader --save-dev

var px2rem = require('postcss-px2rem'); 
module.exports = {  module: {    loaders: [
      {        test: /\.css$/,        loader: "style-loader!css-loader!postcss-loader"
      }
    ]
  },  postcss: function() {    return [px2rem({remUnit: 75})];
  }
}

以下举例vue的写法，vue中以上webpack写法加载出错

在webpack.base中先处理css和postcss

{          test: /\.(css|scss)$/,
          loader:"style-loader!css-loader!sass-loader!postcss-loader"
      }

我们对px2rem写入vue-loader中

vue-px2rem.png

var utils = require('./utils')var config = require('../config')var isProduction = process.env.NODE_ENV === 'production'module.exports = {  //使用px-rem转换
  postcss: [require('postcss-px2rem')({remUnit: 100})],  loaders: utils.cssLoaders({    sourceMap: isProduction
      ? config.build.productionSourceMap
      : config.dev.cssSourceMap,    extract: isProduction
  })
}

关于1px转换

这样一切看上去如此完美了，但是又有个大问题需要注意——1px的边框在转化为rem时，在andriod webview以及部分低版本ios webview 会看不到。处理方法——让1px在编译后，依然是1px
使用postcss-px2rem插件处理px时候，需要在使用时候注意每个属性后面的分号不能省略，默认是都转换为rem，

如若某个属性不需要转换为rem，需要按照dpr不同而分别设置大小，则在后面加上注释/px/，

如若需要原样输出，则在后面加上注释/no/，此处需要多加留意，对于刚接触的我们新手来说，是个坑啊！

.border_style{    border-color: @border_color;    border-style: solid;    border-width: 1px;/*no*/}

我们知道现在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