有个朋友问我在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. CentOS安装配置nginx和php

    今天买了台阿里云服务器用于日常开发测试(新人9块钱半年).系统版本CentOS 6.5 64位. 首先安装nginx: yum install nginx 参考文档: 在CentOS 6上搭建LNMP ...

  2. C - 小明系列故事――捉迷藏 HDU - 4528 bfs +状压 旅游-- 最短路+状压

    C - 小明系列故事――捉迷藏 HDU - 4528 这个题目看了一下题解,感觉没有很难,应该是可以自己敲出来的,感觉自己好蠢... 这个是一个bfs 用bfs就很好写了,首先可以预处理出大明和二明能 ...

  3. Java 四种权限修饰符

    Java 四种权限修饰符访问权限 public protected (default) private 同一个类(我自己) yes yes yes yes 同一包(我邻居) yes yes yes n ...

  4. Zabbix 添加vmware esxi监控

    1) Import the provided template. - TEMPLATE.VMWARE_ESXi_6.0_CIM.xml 2) Install Dependencies: # yum - ...

  5. python执行脚本报错: Non-ASCII character '\xe4' in file yang.py on line 1, but no encoding declared; see http://www.python.org/peps/pep-0263.html for details

    这是因为我们在写python程序的时候,无论在注释里面出现中文,还是在代码里面出现中文,也就是说只要这个python程序里面有中文,我们就不能直接用python2来进行执行,如果安装是python3可 ...

  6. Vue + Element-ui实现后台管理系统(4)---封装一个ECharts组件的一点思路

    封装一个ECharts组件的一点思路 有关后台管理系统之前写过三遍博客,看这篇之前最好先看下这三篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-system ...

  7. 单向环形链表解决约瑟夫环(Josephus)问题

    一.约瑟夫环问题 Josephu 问题为:设编号为1,2,- n的n个人围坐一圈,约定编号为k(1<=k<=n)的人从1开始报数,数到m 的那个人出列,它的下一位又从1开始报数,数到m的那 ...

  8. 设计模式GOF23之工厂模式01

    简单工厂模式和工厂方法模式 工厂模式核心:分工 简单工厂模式不符合OCP(Open-Closed Princinple)原则,扩展时需要更改原代码 工厂方法模式增加了类复杂度代码复杂度等,所以一般使用 ...

  9. [csu1508 地图的四着色]二分图染色

    抽象后的题意:给一个不超过30个点的图,A从中选不超过5个点涂红绿两种颜色,B用黑白两种颜色把剩下的涂完,任意一条边两端的颜色不同,求每种颜色至少用涂一次的方案数 思路:枚举A涂的点的集合,将原图分成 ...

  10. [hdu5312]数的拆分，数学推导

    题意:给定一个序列,a[n]=3n(n-1)+1,n>=1,求给定的m(m<=1e9)最少可以用几个a里面的数表示(可以重复) 思路:对答案分类 (1)假定答案为1,则m必定是a中的某一个 ...