h5 rem vue_移动端h5之rem布局／px2rem

理：

px2rem.png

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-devvar 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.pngvar 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