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. DELPHI +ClientDataSet+DBGRIDEH 进行排序

    DELPHI +ClientDataSet+DBGRIDEH  进行排序因为使用了DBX+ClientDataSet,所以排序显得简单些,只需要设定几个属性就OK了.1.DbGridEH 中设定:Op ...

  2. Android中使用ListView实现自适应表格

    GridView比ListView更容易实现自适应的表格,但是GridView每个格单元的大小固定,而ListView实现的表格可以自定义每个格单元的大小,但因此实现自适应表格也会复杂些(格单元大小不 ...

  3. 关于提高UDP发送效率的方法

    UDP的发送效率和什么因素有关呢? 直观觉得,UDP的切包长越大,应该发送效率越高(最长为65536).可是依据实际測试和在网上查到的资料的结果,包长度为1024为发送效率最高. 这样的结果让人感到疑 ...

  4. 1.node 在node中 进行包与包之间函数的调用 module.exports

    本文参考学习了廖雪峰的大作 模块 但是廖的文章只模块只有一个函数,在此演示一个模块中有两个函数,在另外一个函数中是如何去调用的 //hello.js包中的内容'use strict'; var s=' ...

  5. windows下Redis 主从读写分离部署

    原文:windows下Redis 主从读写分离部署 1.可直接下载window下的运行文件(下面这个链接) 也可以浏览github 查看相应的版本说明文档 https://github.com/Ser ...

  6. js调查server

    <script type="text/javascript"> function showUnreadNews() { $(document).ready(functi ...

  7. 用WPF实现在ListView中的鼠标悬停Tooltip显示

    原文:用WPF实现在ListView中的鼠标悬停Tooltip显示 一.具体需求描述 在WPF下实现,当鼠标悬停在ListView中的某一元素的时候能弹出一个ToolTip以显示需要的信息. 二.代码 ...

  8. Matlab随笔之线性规划

    原文:Matlab随笔之线性规划   LP(Linear programming,线性规划)是一种优化方法,在优化问题中目标函数和约束函数均为向量变量的线性函数,LP问题可描述为:min xs.t. ...

  9. 关于 Swift 中的 Array.contains 方法

    Swift 2.0 中对语言进行了又一次的改进,这次将整个语言变得更加面向对象化,比如在 Swift 1.x 中如果要判断某个元素是否在数组中,就需要用到 contains 函数: if contai ...

  10. WPF 自定义图片剪切器 - 头像剪切(扩展与完善、实时截图)

    原文:WPF 自定义图片剪切器 - 头像剪切(扩展与完善.实时截图) 一.说明:上一次写的"WPF 自定义图片剪切器 - 头像剪切.你懂得"存在明显的缺陷,由于篇幅较长.重新写了一 ...