vue项目适配PC端及移动端页面
需要用到的插件1、npm i lib-flexible-computer -S //根节点会根据页面视口变化而变化font-size大小,此处也可安装lib-flexible插件,在我自己的项目里安装这两个插件区别不大2、npm install postcss-px2rem-exclude --save //开发中有很多文章推荐安装postcss-px2rem,安装之后发现移入的第三方组件库(比如
·
需要用到的插件
1、npm i lib-flexible-computer -S //根节点会根据页面视口变化而变化font-size大小,此处也可安装lib-flexible插件,在我自己的项目里安装这两个插件区别不大
2、npm install postcss-px2rem-exclude --save //开发中有很多文章推荐安装postcss-px2rem,安装之后发现移入的第三方组件库(比如element-ui)的px也被转换成rem,如果想要忽略转换的话需要用到exclude
在main.js文件里引入lib-flexible-computer
在vue.config.js文件里加入以下代码
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require("postcss-px2rem-exclude")({
remUnit:192,//这是rem适配的配置 注意:remUnit在这里要根据lib-flexible的规则来配制,如果您的设计稿是1920px的,用设计稿宽度/10
exclude:/node_modules|element-ui/ //此目录下的文件中的px不会被转换为rem
})
]
}
}
}
最后npm run dev启动项目(有的项目可能是npm run serve)
更多推荐
已为社区贡献1条内容
所有评论(0)