Vue使用rem做自适应布局

Web 小时候可胖了 57℃ 0评论
  1. 安装插件
  • 1
    npm install lib-flexible --save

  • npm install px2rem-loader --save-dev

? ?? 2.? 配置插件

  • 在入口文件
    1
    main.js

    中引入

    1
    lib-flexible

  • ?import?'lib-flexible'

? ?? 3. ?在

1
build/utils.js

文件中配置

1
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 的不同,生成三套代码。
———————————————

转载请注明:九层楼 » Vue使用rem做自适应布局

喜欢 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址