vue移动端自适应经过阿里可伸缩布局方案flexible + postcss-px2rem实现

移动端自适应的方案有不少，好比想依赖flexbox、使用百分比加媒体查询、利用vw和vh单位等，各有各的优劣势, 今天来记录下vue经过flexible + postcss-px2rem将px转化成rem来控制.

项目主要框架

vue的项目直接经过vue-cli直接生成。
动态改变html的font-size: 阿里可伸缩布局方案 - lib-flexible
将px 直接转换成 rem: postcss-px2rem

安装依赖

经过vue-cli生成vue项目文档有不少，在这里就不过多叙述，直接进入安装所需的依赖阶段

npm install lib-flexible -S
npm install postcss-px2rem -D

导入lib-flexible

直接在main.js中引入lib-flexible包

// main.js
import 'lib-flexible'

启动项目

npm run dev

在改变屏幕宽度的时候能够看到html的font-size也会随之跟随改变

改变宽度以后

能够看到已经安装成功lib-flexible

配置loader

在 vue-loader.conf.js 这个文件中修改

'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
  ? config.build.productionSourceMap
  : config.dev.cssSourceMap
/*引入postcss-px2rem*/
const px2rem = require('postcss-px2rem');
module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  }),
  cssSourceMap: sourceMapEnabled,
  cacheBusting: config.dev.cacheBusting,
  transformToRequire: {
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  },
  postcss: function() { // 对px2rem进行配置
    return [px2rem({remUnit: 37.5})];
  }
}

postcss-px2rem 的 remUnit 选项意思是在编译的时候 像素会以怎样的比例转换成rem,好比remUnit 是37.5，那么若是定义的一个div的宽度是75px就会最终会转换为2rem，当html的font-site为37.5px时，div的宽度跟css定义的会正好相等，当html的font-size在大于或小于37.5px时，div或等比放大或缩小， 结合 lib-flexible 的方案，咱们将 postcss-px2rem 的 options.remUnit 设置成设计稿宽度的 1/10，这里咱们假设设计稿宽为 375px.

a {
  color: #42b983;
  font-size: 14px;
}

被转换为

a {
    color: #42b983;
    font-size: 0.373333rem;  // 14/37.5 = 0.373333 
}

这样字体大小就能根据屏幕的大小本身适应了，而且在屏幕宽度等于375px为基准去放大缩小。

对不想转化单位的处理

当咱们不想将某些元素的单位转换成rem时，就能够在css后面加上注释，px单位最终就不会被转换成rem单位了

a {
    color: #42b983;
    font-size: 14px; /*no*/
}

这样就不会转换了