Vue如何实现窗口自适应

1. 安装依赖

cnpm install lib-flexible --save
#需要指定5.1.1版本
cnpm install postcss-pxtorem@5.1.1 --save

2. 引入插件（main.js里添加）

//自适应rem插件
import 'lib-flexible';

添加配置（脚手架2、3不一样） cli3在vue.config.js中添加配置 module.exports = { css: { loaderOptions: { postcss: { plugins: [ require('postcss-pxtorem')({ // 把px单位换算成rem单位 rootValue: 37.5, //通常结合 lib-flexible 设置 rem 基准值,默认用37.5,不然容易出问题 selectorBlackList: ['.ignore'], //则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换 propList: ['*'] }) ] } } } };

cli2（根目录下.postcss.js文件（没有则新建一个）） module.exports = { plugins: { 'autoprefixer': { overrideBrowserslist: [ 'Android >= 4.0', 'iOS >= 7', ] }, 'postcss-pxtorem': { rootValue: 37.5, //通常结合 lib-flexible 设置 rem 基准值,默认用37.5,不然容易出问题 selectorBlackList: ['.ignore'], //则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换 propList: ['*'] } } }