有个朋友问我在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. Java——深入理解Java异常体系

    该系列博文会告诉你如何从入门到进阶,一步步地学习Java基础知识,并上手进行实战,接着了解每个Java知识点背后的实现原理,更完整地了解整个Java技术体系,形成自己的知识框架. 前言: Java的基 ...

  2. spring学习笔记（四）我对spring中bean生命周期的理解

    我相信大部分同学对spring中bean的生命周期都不陌生,但是如果要详细的说出每一个步骤,可能能说出来的也不多,我之前也是这样,前几天调了一下spring的源码,看了一点书,突然一下明朗了,理解了s ...

  3. Apache Hudi又双叕被国内顶级云服务提供商集成了！

    是的,最近国内云服务提供商腾讯云在其EMR-V2.2.0版本中优先集成了Hudi 0.5.1版本作为其云上的数据湖解决方案对外提供服务 Apache Hudi 在 HDFS 的数据集上提供了插入更新和 ...

  4. Day_11【集合】扩展案例2_使用普通for循环获取集合中索引为3的元素并打印，统计集合中包含字符串"def"的数量，删除集合中的所有字符串"，将集合中每个元素中的小写字母变成大写字母def"，

    分析以下需求,并用代码实现 1.定义ArrayList集合,存入多个字符串"abc" "def" "efg" "def" ...

  5. 51单片机实战UcosII操作系统

    中断定义为CPU对系统内外发生的异步事件的响应.异步事件是指没有一定时序关系的.随机发生的事件. 与前后台系统中的中断服务子程序不同,uC/OS-Ⅱ要知道当前内核是否正在处理中断.是否脱离中断. OS ...

  6. vscode+eslint自动格式化vue代码的方法

    前言 使用vscode开发vue项目的时候,为了编码格式的统一化,使用eslint规范进行格式化.此时通过eslint插件可以实现对vue代码的自动格式化. 使用方式 在vscode的插件模块处,搜索 ...

  7. Analysis分析器

    一.Analysis简介 场景执行过程中,loadrunner收集执行过程中的数据,存储在扩展名为.lrr的文件中,Analysis分析器打开这个文件,对文件信息进行处理,并生成图和报告. 数据分析不 ...

  8. ql的python学习之路-day12

    前言:这一节主要学习json和pickle 背景: 相信大家在日常生活中都有接触大型的网络游戏,打游戏的时候都是自己在电脑上操作,自己刷怪升级:当然也会碰到中午去吃饭然后挂机的情况,让电脑自动的刷怪, ...

  9. Reids的面试题

    1.什么是Redis?简述它的优缺点? Redis本质上是一个Key-Value类型的内存数据库,很像memcached,整个数据库统统加载在内存当中进行操作,定期通过异步操作把数据库数据flush到 ...

  10. 一文搞懂volatile的可见性原理

    说volatile之前,了解JMM(Java内存模型)有助于我们理解和描述volatile关键字.JMM是Java虚拟机所定义的一种抽象规范,用来屏蔽不同硬件和操作系统的内存访问差异,让Java程序在 ...