vue 自适应布局

第一步:安装
伸缩布局方案插件: lib-flexible
px转rem:px2rem-loader

第二步:引入
安装好之后在main.js中引入 lib-flexible
import ‘lib-flexible’
然后在依赖中找到该文件把其中的540改为width,因为本来设计的初衷是为了移动端适配,改好后是可以适配pc端的
vue 自适应布局_第1张图片
最好把lib-flexible文件单独拿出来放到文件夹下引入,因为依赖删除下载过后都是重新下载的,它不会保留更改的内容的
第三步:配置postcss-px2rem的参数
打开vue.config.js
vue 自适应布局_第2张图片
remUnit //表示1rem对应的px,基本上都是设计稿的十分之一
remPrecision//表示px转换成rem保留的小数位数
最后效果图
vue 自适应布局_第3张图片

你可能感兴趣的:(前端,vue)