赣州网站建设专家,印象庆阳网,铁道部建设管理司网站,青岛公司网站设计vue 中实现 rem 适配vue 项目实现页面自适应#xff0c;可以安装插件实现。
postcss-pxtorem 是 PostCSS 的插件#xff0c;用于将像素单元生成 rem 单位。
autoprefixer 浏览器前缀处理插件。
amfe-flexible 可伸缩布局方案替代了原先的 lib-flexible 选用了当前众多浏览…
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;
