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*/
}

這樣就不會轉換了