有个朋友问我在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. Sunday算法：字符串匹配算法进阶

    背景 我们第一次接触字符串匹配,想到的肯定是直接用2个循环来遍历,这样代码虽然简单,但时间复杂度却是\(Ω(m*n)\),也就是达到了字符串匹配效率的下限.于是后来人经过研究,构造出了著名的KMP算法 ...

  2. checked 完整版全选，单选，反选

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel= ...

  3. Eating Everything Efficiently(反向dp)

    传送门 取最大值即可.用拓扑,dfs都可以实现 #include <bits/stdc++.h> using namespace std; const int maxn=500009; i ...

  4. E. Marbles 状压dp

    E. Marbles 这个是一个状压dp 题目大意是:给你一个数组,数组的数在1到20之间,有一个操作就是交换相邻的两个数,问 让所有相同的数相邻的最小操作次数 dp[s] 表示s状态下的操作次数,w ...

  5. E. Sasha and Array 矩阵快速幂 + 线段树

    E. Sasha and Array 这个题目没有特别难,需要自己仔细想想,一开始我想了一个方法,不对,而且还很复杂,然后lj提示了我一下说矩阵乘,然后再仔细想想就知道怎么写了. 这个就是直接把矩阵放 ...

  6. C. Helga Hufflepuff's Cup 树形dp 难

    C. Helga Hufflepuff's Cup 这个题目我感觉挺难的,想了好久也写了很久,还是没有写出来. dp[i][j][k] 代表以 i 为根的子树中共选择了 j 个特殊颜色,且当前节点 i ...

  7. jquery注册页面的判断及代码的优化

    今天主要负责完成注册页面的jquery代码的写入与优化,基本代码和登录页面差不多,复制修改一下代码就行了,主要区别在于多了一个重复密码与密码是否一致的判断,刚开始写出来的代码导致每个框的后面都追加重复 ...

  8. [zoj3813]Alternating Sum 公式化简，线段树

    题意:给一个长度不超过100000的原串S(只包含数字0-9),令T为将S重复若干次首尾连接后得到的新串,有两种操作:(1)修改原串S某个位置的值(2)给定L,R,询问T中L<=i<=j& ...

  9. AXI总线slave模式下接收数据---verilog代码

    AXI总线slave模式下接收数据---verilog代码 `timescale 1ns / 1ps ///////////////////////////////////////////////// ...

  10. 在终端输入npm run serve时出现npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! test_vue_0613@1.0.0 dev: 错误的解决方法

    在vscode终端使用命令 npm run serve 的时候报错 错误原因在于由于文件 node_modules 太大,在项目上传时有些人会删掉 导致我们下载的项目中缺少这个文件 在尝试把自己项目的 ...