微动网站建设网络推广国际外贸网络交易平台
vue 中实现 rem 适配
vue 项目实现页面自适应,可以安装插件实现。
postcss-pxtorem 是 PostCSS 的插件,用于将像素单元生成 rem 单位。
autoprefixer 浏览器前缀处理插件。
amfe-flexible 可伸缩布局方案替代了原先的 lib-flexible 选用了当前众多浏览器兼容的 viewport。
- 安装插件。
npm i postcss-pxtorem npm i autoprefixer npm i amfe-flexible
- 在根目录新建 postcss.config.js,并根据需要做下面配置。
module.exports = {plugins: {autoprefixer: {overrideBrowserslist: ["Android 4.1","iOS 7.1","Chrome > 31","ff > 31","ie >= 8","last 10 versions" // 所有主流浏览器最近10版本用],grid: true},"postcss-pxtorem": {rootValue: 192, // 设计稿宽度的1/ 10propList: ["*", "!border"], // 除 border 外所有px 转 remselectorBlackList: [".el-"] // 过滤掉.el-开头的class,不进行rem转换}} };
- 在 main.js 中引入 amfe-flexible。
import 'amfe-flexible/index.js';