参考地址  https://www.cnblogs.com/WQLong/p/7798822.html

1.下载lib-flexible

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

npm i lib-flexible --save

2.引入lib-flexible

在main.js中引入lib-flexible

import 'lib-flexible/flexible'

3.设置meta标签

通过meta标签,设置设备宽度以及缩放比例

<meta name="viewport" content="width=device-width, initial-scale=1.0">

4.安装px2rem-loader

npm install px2rem-loader

5.配置px2rem-loader

这里是重要的一步~~

在build文件中找到util.js,将px2rem-loader添加到cssLoaders中,如:

const cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75 // 这里设置html根字体,vant-UI的官方根字体大小是37.5
}
}

同时,在generateLoaders方法中添加px2remLoader

function generateLoaders (loader, loaderOptions) {
  const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader] if (loader) {
  loaders.push({
  loader: loader + '-loader',
  options: Object.assign({}, loaderOptions, {
  sourceMap: options.sourceMap
  })
  })
  } if (options.extract) {
  return ExtractTextPlugin.extract({
  use: loaders,
  fallback: 'vue-style-loader'
  })
  } else {
  return ['vue-style-loader'].concat(loaders)
  }
}

6.安装 postcss-pxtorem

npm install postcss-pxtorem --save-dev

7.在根目录找到.postcssrc.js文件  插入一下代码

'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7'] // 添加浏览器前缀 安卓4.0版本,ios 7.0版本以上
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}

8.重启,一切ok~

当配置完之后,只需要重启下服务,就自动转化为rem了

npm run dev

vant ui rem配置流程的更多相关文章

  1. UI设计(流程/界面)设计规范

    1.UI设计基本概念与流程 1.1 目的 规范公司UI设计流程,使UI设计师参与到产品设计整个环节中来,对产品的易用性进行全流程负责,使UI设计的流程规范化,保证UI设计流程的可操作性. 1.2范围  ...

  2. 使用rem配置PC端自适应大屏

    效果如下 使得大屏不论在什么宽高比例依然能展示全部数据 安装 npm install -S postcss-pxtorem rem配置思路 原先的rem函数是能解决大部分的问题的,如果展示不全,也可以 ...

  3. QT特供 CGAL配置流程(基于QT5+VS2015)

    最近做的QT项目涉及计算几何库,需要用到CGAL,其配置着实麻烦,而且相互关联的软件也存在版本兼容一类的问题,在这里就对其配置流程做一些整理说明,以便后来者能够少些烦恼.(注:以下使用Win10作说明 ...

  4. 转载-Linux下svn搭建配置流程

    Linux下svn搭建配置流程     一.    源文件编译安装.源文件共两个,为: 1.   下载subversion源文件 subversion-1.6.1.tar.gz http://d136 ...

  5. win10下vagrant+centos7 rails虚拟开发机配置流程

    此文写于2017.8.21 在写本文前,笔者已经尝试了多种其他的替代方法,例如wmware虚拟机安装kylin.然而发现总是还有各种问题.经大佬指点安装了virtualbox + vagrant.于是 ...

  6. HI3531的DDR3配置流程

    DDR3 初始化配置流程 系统上电之后,必须先完成DDR3 SDRAM 的初始化操作,系统才能访问DDR3 SDRAM.在进行初始化之前需要注意以下几点: 对DDR3 SDRAM 进行上电操作时,需要 ...

  7. Linux下双网卡Firewalld的配置流程

    实验室拟态存储的项目需要通过LVS-NAT模式通过LVS服务器来区隔内外网的服务,所以安全防护的重心则落在了LVS服务器之上.笔者最终选择通过firewalld放行端口的方式来实现需求,由于firew ...

  8. Java采用RSA加密及解密技术的有关Maven项目的配置流程:

    第一步: 获得RSA公钥私钥(秘钥格式:PKCS#8 ,测试使用的是无私钥密码的) 公钥: -----BEGIN PUBLIC KEY----- MIGfMA0GCSqGSIb3DQEBAQUAA4G ...

  9. xampp+vscode开发php的配置流程

    一.所需文件 1.xampp集成服务器(个人使用7.1.7)https://www.apachefriends.org/download.html 2.vscode https://code.visu ...

  10. GPON介绍及华为OLT网关注册配置流程(转)

    原文地址:https://blog.csdn.net/zhouzxi/article/details/79244862 一.GPON介绍 1.GPON简介 随着技术的发展,光纤变得“便宜又好用”,因此 ...

随机推荐

  1. C++初阶(stack+queue)

    stack stack介绍 stack是一种先进后出的数据结构,只有一个出口,类似于栈.stack容器哦允许新增元素,移除元素,取得栈顶元素,但是除了最顶端之后,没有任何其他办法可以存取stack的其 ...

  2. Task02:艺术画笔见乾坤

    Matplotlib的三层api(应用程序编程接口) matplotlib.backend_bases.FigureCanvas:绘图区 matplotlib.backend_bases.Render ...

  3. Django基础笔记3(form组件)

    From组件 from django.forms import Form, fields class loginForm(Form): # 设置规则 username = fields.CharFie ...

  4. 【数据库】pgsql窗口函数,分组求sum的方式

    select distinct    quantity,    standard_cost,    sum(a.quantity*a.standard_cost) over(partition by ...

  5. java并发数据结构之CopyOnWriteArrayList

    CopyOnWriteArrayList是一个线程安全的List实现,其在对对象进行读操作时,由于对象没有发生改变,因此不需要加锁,反之在对象进行增删等修改操作时,它会先复制一个对象副本,然后对副本进 ...

  6. C#深拷贝方法

    概述 为什么要用到深拷贝呢?比如我们建了某个类Person,并且实例化出一个对象,然后,突然需要把这个对象复制一遍,并且复制出来的对象要跟之前的一模一样,来看下我们一般会怎么做. 方法一(利用反射实现 ...

  7. 一个简单的工具开发:从学生端更新程序部署工具说起,浅谈qt中自定义控件制作和调用、TCP协议下文件的收发 、以及可执行文件的打包

    一个简单的工具开发:从学生端更新程序部署工具说起,浅谈qt中ui的使用和TCP协议下文件的收发.以及可执行文件的打包 写在前面,Qt Designer是一个非常操蛋的页面编辑器,它非常的...怎么说呢 ...

  8. week_6

    Andrew Ng 机器学习笔记 ---By Orangestar Week_6 (1) In Week 6, you will be learning about systematically im ...

  9. Flutter异常监控 - 壹 | 从Zone说起

    开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第3天,点击查看活动详情 如果你正需要处理Flutter异常捕获,那么恭喜你,找对地了,这里从根源上给你准备了Flutter异常捕获 ...

  10. Spark通信框架RPC介绍

    Spark通信框架RPC介绍 内容安排: 1.RPC原理 2.nio操作 3.netty简单的api 4.自定义RPC框架 RPC原理学习 什么是RPC RPC(Remote Procedure Ca ...