有个朋友问我在vue项目怎么做rem适配，我工作中都是用的dva，但是我感觉道理都是一样的，换汤不换药。配完就顺手写下来吧！

需要安装两个插件库 lib-flexible和px2rem-loader

yarn add lib-flexible

yarn add px2rem-loader

　　

flexible.js是淘宝官方H5移动适应解决方案。它做了三件事：

1、动态改写标签

2、给<html>元素添加data-dpr属性，并且动态改写data-dpr的值

3、给<html>元素添加font-size属性，并且动态改写font-size的值

我个人理解就是做了一个动态的媒体查询，实时设置根结点的font-size

px2rem会在项目编译的过程中根据根结的font-size值将我们项目css中的px单位转成rem。但是有些是我们不需要转成rem的，比如font-size或者是一些固定大小的原素。这个时候我们可以把px写成PX，PX在编译中不会被转成rem。但是格式化代码的时候会把PX格式化成px，这点需要注意一下。另一种避免转成rem的方式就是写成行内样式，哈哈。

px2rem的使用是需要我们简单的配置一下的。px2rem是一个loader，vue中所有的loader都是在一个utils.js文件中配置生成的，所以我们只需要找到cssLoader这个对象，在它下面再加一个px2remLoader，就可以让这个loader在编译中将我们的px转成rem了。一般来说我们的设计稿都是2倍的，也就是750。remUnit这个值就是750/10得来的。配置完后，重启项目，我们配置的px2remLoader就会生效了。设计稿是多大，我们写多大就了。

& vue项目中的rem适配的更多相关文章

  1. 转：如何在Vue项目中使用vw实现移动端适配

    https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...

  2. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em，rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

  3. 在Vue项目中使用vw实现移动端适配

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

  4. 如何在Vue项目中使用vw实现移动端适配(转)

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

  5. Vue项目中使用vw实现移动端适配

    我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终端. 随着viewport单位越来越受到众多浏览器的支持,下面将简单介绍怎么实现vw的兼容问题,用vw代替rem 当我们采 ...

  6. 如何在Vue项目中使用vw实现移动端适配

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在< 使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着 viewport 单位 ...

  7. vue 项目中实用的小技巧

    # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...

  8. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  9. 在vue项目中, mock数据

    1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...

随机推荐

  1. SaltStack漏洞导致的挖矿排查思路

    描述 SaltStack是一套C/S架构的运维工具,服务端口默认为4505/4506,两个端口如果对外网开放危害非常大,黑客利用SaltStack的远程命令执行漏洞CVE-2020-11651可以直接 ...

  2. Jenkins如何进行权限管理

    一.安装插件 插件名:Role-based Authorization Strategy 二.配置授权策略 三.创建用户 四.添加并配置权限 4.1.添加Global Role 普通角色拥有全局只读权 ...

  3. P1714切蛋糕(不定区间最值)

    题面 今天是小Z的生日,同学们为他带来了一块蛋糕.这块蛋糕是一个长方体,被用不同色彩分成了N个相同的小块,每小块都有对应的幸运值. 小Z作为寿星,自然希望吃到的第一块蛋糕的幸运值总和最大,但小Z最多又 ...

  4. 树的最小支配集 E - Cell Phone Network POJ - 3659 E. Tree with Small Distances

    E - Cell Phone Network POJ - 3659 题目大意: 给你一棵树,放置灯塔,每一个节点可以覆盖的范围是这个节点的所有子节点和他的父亲节点,问要使得所有的节点被覆盖的最少灯塔数 ...

  5. ASP.NET Core中结合枚举和资源文件显示列表

    模型类的某些属性以枚举形式出现,我们希望在打开编辑表单时在选择列表中显示枚举值.有时我们想要枚举元素名称,但有时我们想要使用自定义名称甚至翻译. 这个例子演示了如何获取枚举元素名称以选择ASP.NET ...

  6. Excel：公式转数值

    跨Workbook引用有些危险,有时要把公式转换为数值.修改频繁,有时也要把公式转换为数值. 方法一,选中区域,复制Ctrl+C,选择性粘贴Ctrl+Alt+V,数值V.方法二,选中区域,复制Ctrl ...

  7. uCOS2014.1.9

    卢友亮P69 ptcb->OSTCBStat |= OS_STAT_SUSPEND; /*标志任务被挂起*/ 这句是标志人物被挂起成阻塞态的关键. OSTCBStat  //任务的当前状态标志 ...

  8. 设计模式之GOF23组合模式

    组合模式Composite 使用组合模式的场景:把部分和整体的关系用树形结构表示,从而使客户端可以使用统一的方式处理对象和整体对象(文件和文件夹) 组合模式核心: -抽象构件(Component)角色 ...

  9. XSS挑战之旅（通过看代码解题）

    XSS 挑战之旅 level 1 没有什么过滤 payload: <script>alert(1)</script> level 2 php关键代码: echo "& ...

  10. SQLServer用with temptb AS临时表查询或者更新字段，将某个字段赋值成某个字段的值

    with temptb AS(SELECT sl.CompanyID,info.BID FROM dbo.TableXXXXX   slLEFT JOIN dbo.Tableinfo  infoON ...