1.下载lib-flexible

我使用的是vue-cli+webpack,所以是通过npm来安装的

npm i lib-flexible --save

2.引入lib-flexible

在main.js中引入lib-flexible

import 'lib-flexible/flexible'

3.安装px2rem-loader

npm install px2rem-loader

4.配置px2rem-loader

在build文件中找到util.js,将px2rem-loader添加到cssLoaders中,将下面代码加进cssLoaders方法中

  const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUint: 75
}
}

同时,在generateLoaders方法中添加px2remLoader

  function generateLoaders (loader, loaderOptions) {
const loaders = [cssLoader, px2remLoader] if (options.usePostCSS) {
loaders.push(postcssLoader)
} if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}

5、重启

当配置完之后,重启下服务,px会自动转化为rem了

npm run dev

6、注意事项

1、不能在index.html的头部加 name 为 viewport 的 meta 标签,flexible会自动为我们添加!

2、对css中文字样式增加/* px */后缀,会编译出适应不同dpr的字号

.text{
font-size: 28px; /* px */
}
// 会被编译成如下: [data-dpr="1"] .text { // data-dpr是由flexible计算出来并加在html上的设备像素比
font-size: 14px;
} [data-dpr="2"] .text {
font-size: 28px;
} [data-dpr="3"] .text {
font-size: 42px;
}

3、对边框样式增加/* no */后缀,会保持原样

.box{
border: 1px solid #fff; /* no */
}
// 会被编译成如下:
.box{
border: 1px solid #fff;
}

关于vue中使用rem问题的更多相关文章

  1. vue 中使用rem布局

    在使用vue-cli搭建好项目框架后,在目录结构的index.html文件中添加一段js代码: fnResize(); window.onresize = function () { fnResize ...

  2. & vue项目中的rem适配

    有个朋友问我在vue项目怎么做rem适配,我工作中都是用的dva,但是我感觉道理都是一样的,换汤不换药.配完就顺手写下来吧! 需要安装两个插件库 lib-flexible和px2rem-loader ...

  3. vue px 转rem

    来自:https://www.cnblogs.com/wangqiao170/p/8652505.html 侵 删   每一个认真生活的人,都值得被认真对待 vue px转换为rem 前端开发中还原设 ...

  4. vue px转换为rem

    前端开发中还原设计图的重要性毋庸置疑,目前来说应用最多的应该也还是使用rem.然而很多人依然还是处于刀耕火种的时代,要么自己去计算rem值,要么依靠编辑器安装插件转换. 而本文的目标就是通过一系列的配 ...

  5. vue中如何不通过路由直接获取url中的参数

    前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...

  6. vue中的重要特性

    一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  7. Vue中comoputed中的数据绑定

    Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...

  8. vue中使用stompjs实现mqtt消息推送通知

    最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...

  9. Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理

    基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...

随机推荐

  1. Python 金融数据分析 (一)—— 股票数据

    1. tushare 库 tushare 的官网请见:TuShare -财经数据接口包,是国人自己开发的 Python 爬数据工具(所谓的爬,自然就是在线连网获取数据),囊括股票.期货.宏观经济.电影 ...

  2. DDD实战8_1 实现对领域中连接字符串的可配置

    1.在webapi的配置文件中配置连接字符串节 2.在webapi的startup类中的Configure方法中 将工具类里面AppSetting的静态Section的值 对应上webapi的配置文件 ...

  3. C++使用Windows API CreateMutex函数多线程编程

    C++中也可以使用Windows 系统中对应的API函数进行多线程编程.使用CreateThread函数创建线程,并且可以通过CreateMutex创建一个互斥量实现线程间数据的同步: #includ ...

  4. HDU - 4734 F(x) (2013成都网络游戏,数字DP)

    意甲冠军:求0-B见面<=F[A]所有可能的 思维:数字DP,内存搜索 #include <iostream> #include <cstring> #include & ...

  5. (记录)mysql分页查询,参数化过程的坑

    在最近的工作中,由于历史遗留,一个分页查询没有参数化,被查出来有sql注入危险,所以对这个查询进行了参数化修改. 一看不知道,看了吓一跳,可能由于种种原因,分页查询sql是在存储过程中拼接出来的,wh ...

  6. 信号、系统与滤波器设计(matlab)

    0. 基本概念 AWG:Additive White(zero-mean) Gaussian,可加白噪声: AWGN:Additive White(zero-mean) Gaussian Noise ...

  7. MCB2300的CTM1050(CAN) - 系列示意图

    这一系列示意图由Portel DXP 2004绘. 截图: 文件下载: CTM1050.7z 版权声明:本文博客原创文章,博客,未经同意,不得转载.

  8. angular form set dynamic control(form动态设置control)

    实现效果 form表单控件的实时更新 效果如图 关键代码 validateForm: FormGroup; // 表单校验 constructor( private fb: FormBuilder ) ...

  9. WPF 通过CommandBinding捕获命令

    RoutedCommand与业务逻辑无关,业务逻辑是通过CommandBinding来实现 using System; using System.Collections.Generic;using S ...

  10. 通通玩blend美工(1)——荧光Button

    原文:通通玩blend美工(1)--荧光Button 最近老大出差去了,光做项目也有点烦,写点教程消遣消遣(注:此乃初级教程,所以第一个消遣是本人消遣,第二个是指供各位看官消遣...) 看着各位大虾出 ...