【前端|vue 自适应布局】第一步：安装
伸缩布局方案插件： lib-flexible
px转rem：px2rem-loader
第二步：引入
安装好之后在main.js中引入 lib-flexible
import ‘lib-flexible’
然后在依赖中找到该文件把其中的540改为width,因为本来设计的初衷是为了移动端适配，改好后是可以适配pc端的
文章图片
最好把lib-flexible文件单独拿出来放到文件夹下引入，因为依赖删除下载过后都是重新下载的，它不会保留更改的内容的
第三步：配置postcss-px2rem的参数
打开vue.config.js
文章图片
remUnit //表示1rem对应的px,基本上都是设计稿的十分之一
remPrecision//表示px转换成rem保留的小数位数
最后效果图
文章图片
推荐阅读
- PC端|vue 如何PC端不同屏幕大小分辨率自适应
- 前端|尚医通-前端快速入门
- 前端学习|前端学习-Antd 组件库基础
- javascript|View UI Plus 发布 1.2.0 版本，新增 Image、Skeleton、Typography组件
- 前端|View UI Plus 发布 1.3.0 版本，新增 Space、$ImagePreview 组件
- ajax|AJAX详细教程
- avue|Avue中实现多选删除功能
- avue|Avue 远程搜索输入框，联动赋值其他组件 v2.7.10及以下
- 前端|CMMB