移动端h5之rem布局／px2rem

rem布局之媒体匹配

最早的时候用的rem适配方法，通过手动设置媒体查询对不同设备进行设置font-size

// 自适应 
// ------------------------
html{
  font-size: 38px;
}
@media only screen and (min-width: 320px) {
  html {
    font-size: 42.666px !important;
  }
}
@media only screen and (min-width: 360px) {
  html {
    font-size: 48px !important;
  }
}
@media only screen and (min-width: 375px) {
  html {
    font-size: 50px !important;
  }
}
@media only screen and (min-width: 414px) {
  html {
    font-size: 55.2px !important;
  }
}
@media only screen and (min-width: 480px) {
  html {
    font-size: 64px !important;
  }
}
@media only screen and (min-width: 560px) {
  html {
    font-size: 74.666px !important;
  }
}
@media only screen and (min-width: 640px) {
  html {
    font-size: 85.333px !important;
  }
}
@media only screen and (min-width: 720px) {
  html {
    font-size: 96px !important;
  }
}
@media only screen and (min-width: 750px) {
  html {
    font-size: 100px !important;
  }
}
@media only screen and (min-width: 800px) {
  html {
    font-size: 106.666px !important;
  }
}
@media only screen and (min-width: 960px) {
  html {
    font-size: 128px !important;
  }
}

当然这是很古老的方法，可以看出来我们的设计稿是750px的，以750为基准设置font-size为100
我们可以看出这个方法通过人为比例计算，不能做到设备之间很好的覆盖有很大误差

rem布局之自动设置fontsize

所有有了下面这个根据屏幕尺寸自动设置font-size的方法，直接贴代码

(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=640){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

这段代码的大意是：
如果页面的宽度超过了640px，那么页面中html的font-size恒为100px，否则，页面中html的font-size的大小为： 100 * (当前页面宽度 / 640)

但是如果ui出的图是750px的你也要适当调整一下，为了方便计算也可以调整宽度
我们以设计稿为640px为基准

width:100px;
width:1rem;//转换计算后为1rem

iphone5-1.png

iphone6-1.png

rem布局之开阔视野

该方案使用相当简单，把下面这段已压缩过的 原生JS（仅1kb） 放到 HTML 的 head 标签中即可（注:不要手动设置viewport，该方案自动帮你设置）

这是阿里团队的高清方案布局代码，所谓高清方案就是根据设备屏幕的DPR（设备像素比，又称DPPX，比如dpr=2时，表示1个CSS像素由2个物理像素点组成）** 动态设置 html 的font-size, 同时根据设备DPR调整页面的缩放值，进而达到高清效果**
关于像素请进

此方案也是默认 1rem = 100px，所以你布局的时候，完全可以按照设计师给你的效果图写各种尺寸啦。

iphone5.png

iphone6.png

到这里大家和上面的对比应该有发现些什么，我们屏幕越大，像素越高，看到的应用越多

源码

'use strict';

/**
 * @param {Number} [baseFontSize = 100] - 基础fontSize, 默认100px;
 * @param {Number} [fontscale = 1] - 有的业务希望能放大一定比例的字体;
 */
const win = window;
export default win.flex = (baseFontSize, fontscale) => {
  const _baseFontSize = baseFontSize || 100;
  const _fontscale = fontscale || 1;

  const doc = win.document;
  const ua = navigator.userAgent;
  const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
  const UCversion = ua.match(/U3\/((\d+|\.){5,})/i);
  const isUCHd = UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80;
  const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
  let dpr = win.devicePixelRatio || 1;
  if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {
    // 如果非iOS, 非Android4.3以上, 非UC内核, 就不执行高清, dpr设为1;
    dpr = 1;
  }
  const scale = 1 / dpr;

  let metaEl = doc.querySelector('meta[name="viewport"]');
  if (!metaEl) {
    metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    doc.head.appendChild(metaEl);
  }
  metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);
  doc.documentElement.style.fontSize = `${_baseFontSize / 2 * dpr * _fontscale}px`;
};

看到大漠写了一种关于viewport-vw-vh的适配方法，大家也可以看看相关资料
Viewport移动端适配

rem布局之px2rem

我们在写rem布局的时候发现，尽管我们设置了基准font-size，但是我们还是要去换选一下，有没有办法直接写px，让他自动换算成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);
}