vant ui rem配置流程
参考地址 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配置流程的更多相关文章
- UI设计(流程/界面)设计规范
1.UI设计基本概念与流程 1.1 目的 规范公司UI设计流程,使UI设计师参与到产品设计整个环节中来,对产品的易用性进行全流程负责,使UI设计的流程规范化,保证UI设计流程的可操作性. 1.2范围 ...
- 使用rem配置PC端自适应大屏
效果如下 使得大屏不论在什么宽高比例依然能展示全部数据 安装 npm install -S postcss-pxtorem rem配置思路 原先的rem函数是能解决大部分的问题的,如果展示不全,也可以 ...
- QT特供 CGAL配置流程(基于QT5+VS2015)
最近做的QT项目涉及计算几何库,需要用到CGAL,其配置着实麻烦,而且相互关联的软件也存在版本兼容一类的问题,在这里就对其配置流程做一些整理说明,以便后来者能够少些烦恼.(注:以下使用Win10作说明 ...
- 转载-Linux下svn搭建配置流程
Linux下svn搭建配置流程 一. 源文件编译安装.源文件共两个,为: 1. 下载subversion源文件 subversion-1.6.1.tar.gz http://d136 ...
- win10下vagrant+centos7 rails虚拟开发机配置流程
此文写于2017.8.21 在写本文前,笔者已经尝试了多种其他的替代方法,例如wmware虚拟机安装kylin.然而发现总是还有各种问题.经大佬指点安装了virtualbox + vagrant.于是 ...
- HI3531的DDR3配置流程
DDR3 初始化配置流程 系统上电之后,必须先完成DDR3 SDRAM 的初始化操作,系统才能访问DDR3 SDRAM.在进行初始化之前需要注意以下几点: 对DDR3 SDRAM 进行上电操作时,需要 ...
- Linux下双网卡Firewalld的配置流程
实验室拟态存储的项目需要通过LVS-NAT模式通过LVS服务器来区隔内外网的服务,所以安全防护的重心则落在了LVS服务器之上.笔者最终选择通过firewalld放行端口的方式来实现需求,由于firew ...
- Java采用RSA加密及解密技术的有关Maven项目的配置流程:
第一步: 获得RSA公钥私钥(秘钥格式:PKCS#8 ,测试使用的是无私钥密码的) 公钥: -----BEGIN PUBLIC KEY----- MIGfMA0GCSqGSIb3DQEBAQUAA4G ...
- xampp+vscode开发php的配置流程
一.所需文件 1.xampp集成服务器(个人使用7.1.7)https://www.apachefriends.org/download.html 2.vscode https://code.visu ...
- GPON介绍及华为OLT网关注册配置流程(转)
原文地址:https://blog.csdn.net/zhouzxi/article/details/79244862 一.GPON介绍 1.GPON简介 随着技术的发展,光纤变得“便宜又好用”,因此 ...
随机推荐
- C++初阶(stack+queue)
stack stack介绍 stack是一种先进后出的数据结构,只有一个出口,类似于栈.stack容器哦允许新增元素,移除元素,取得栈顶元素,但是除了最顶端之后,没有任何其他办法可以存取stack的其 ...
- Task02:艺术画笔见乾坤
Matplotlib的三层api(应用程序编程接口) matplotlib.backend_bases.FigureCanvas:绘图区 matplotlib.backend_bases.Render ...
- Django基础笔记3(form组件)
From组件 from django.forms import Form, fields class loginForm(Form): # 设置规则 username = fields.CharFie ...
- 【数据库】pgsql窗口函数,分组求sum的方式
select distinct quantity, standard_cost, sum(a.quantity*a.standard_cost) over(partition by ...
- java并发数据结构之CopyOnWriteArrayList
CopyOnWriteArrayList是一个线程安全的List实现,其在对对象进行读操作时,由于对象没有发生改变,因此不需要加锁,反之在对象进行增删等修改操作时,它会先复制一个对象副本,然后对副本进 ...
- C#深拷贝方法
概述 为什么要用到深拷贝呢?比如我们建了某个类Person,并且实例化出一个对象,然后,突然需要把这个对象复制一遍,并且复制出来的对象要跟之前的一模一样,来看下我们一般会怎么做. 方法一(利用反射实现 ...
- 一个简单的工具开发:从学生端更新程序部署工具说起,浅谈qt中自定义控件制作和调用、TCP协议下文件的收发 、以及可执行文件的打包
一个简单的工具开发:从学生端更新程序部署工具说起,浅谈qt中ui的使用和TCP协议下文件的收发.以及可执行文件的打包 写在前面,Qt Designer是一个非常操蛋的页面编辑器,它非常的...怎么说呢 ...
- week_6
Andrew Ng 机器学习笔记 ---By Orangestar Week_6 (1) In Week 6, you will be learning about systematically im ...
- Flutter异常监控 - 壹 | 从Zone说起
开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第3天,点击查看活动详情 如果你正需要处理Flutter异常捕获,那么恭喜你,找对地了,这里从根源上给你准备了Flutter异常捕获 ...
- Spark通信框架RPC介绍
Spark通信框架RPC介绍 内容安排: 1.RPC原理 2.nio操作 3.netty简单的api 4.自定义RPC框架 RPC原理学习 什么是RPC RPC(Remote Procedure Ca ...