vue3 +vite 自适应(rem 适配)
vue3 +vite 自适应(rem 适配)vue3 +vite 自适应(rem 适配)vue3 +vite 自适应(rem 适配)vue3 +vite 自适应(rem 适配)vue3 +vite 自适应(rem 适配)vue3 +vite 自适应(rem 适配)
·
插件安装
postcss-pxtorem 是PostCSS的插件,用于将像素单元生成rem单位
autoprefixer 浏览器前缀处理插件
amfe-flexible 可伸缩布局方案 替代了原先的lib-flexible
选用了当前众多浏览器兼容的viewport
npm i postcss-pxtorem
npm i autoprefixer
npm i -S amfe-flexible
autoprefixer配置
在项目的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/ 10
propList: ["*", "!border"], // 除 border 外所有px 转 rem
selectorBlackList: [".el-"] // 过滤掉.el-开头的class,不进行rem转换
}
}
};
amfe-flexible 在main.js
中引入即可
import "amfe-flexible/index.js";
更多推荐
已为社区贡献8条内容
所有评论(0)