欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue使用rem做自适应布局

程序员文章站 2022-07-09 19:40:42
安装插件 npm install lib-flexible --save npm install px2rem-loader --save-dev 2. 配置插件 在入口文件 main.js 中引入 lib-flexible: import 'lib-flexible' 3. 在 build/uti ......
  1. 安装插件
  • npm install lib-flexible --save
  • npm install px2rem-loader --save-dev

     2.  配置插件

  • 在入口文件 main.js 中引入 lib-flexible
  •  import 'lib-flexible'

     3.  在 build/utils.js 文件中配置 px2rem-loader

  • cssloaders函数最后面添加如下代码
                 // 增加代码,px转rem配置(需要将px2remloader添加进loaders数组中)
                    const px2remloader={
                               loader: 'px2rem-loader',
                               options: {
                                        remunit: 192,  //根据视觉稿,rem为px的十分之一,1920px  192 rem
                                       remprecision: 8//换算的rem保留几位小数点
                                     }
最后说明一下,px 写法上会有些不同,可以参考 px2rem 官方介绍,下面简单介绍一下。
1. 直接写 px,编译后会直接转化成 rem;
2. 在 px 后面添加 /*no*/,不会转化 px,会原样输出;
3. 在 px 后面添加 /*px*/,会根据 dpr 的不同,生成三套代码。
———————————————