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 ......
- 安装插件
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 的不同,生成三套代码。
———————————————
1. 直接写 px,编译后会直接转化成 rem;
2. 在 px 后面添加 /*no*/,不会转化 px,会原样输出;
3. 在 px 后面添加 /*px*/,会根据 dpr 的不同,生成三套代码。
———————————————