时间戳

首页 > 技术文章 > vue移动端自适应通过阿里可伸缩布局方案flexible + postcss-px2rem实现

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

slongs 2018-10-30 17:04 原文

移动端自适应的方案有很多，比如想依赖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*/
}

这样就不会转换了

推荐阅读