您现在的位置:首页 >> 网页设计 >> JavaScript >> 内容

Vue使用rem做自适应布局

时间:2020-5-5 16:53:34

  核心提示:安装插件npm install lib-flexible --savenpm install px2rem-loader --save-dev 2. 配置插件在入口文件main.js中引入lib-fl...
  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 的不同,生成三套代码。
———————————————

Java免费学习   Java自学网 http://www.javalearns.com

关注微信号:javalearns   随时随地学Java

或扫一扫

随时随地学Java

作者:不详 来源:网络
    你是从哪里知道本网站的?
  • 网友介绍的
  • 百度搜索的
  • Google搜索的
  • 其它搜索过来的
  • 网址输错了进来的
  • 太忙了不记得了
共有评论 0相关评论
发表我的评论
  • 大名:
  • 内容:
  • java学习网(www.javalearns.com) © 2014 版权所有 All Rights Reserved.
  • Email:javalearns@163.com 站长QQ:1356121699 晋ICP备14003680号-3
  • java学习网部分内容来自网络或网友发布,如侵犯了您利益,请发邮件至:javalearns@126.com,我们尽快处理!
  • Java学习网
  • 网站统计
  • 晋公网安备 14042902000001号