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简介 随着技术的发展,光纤变得“便宜又好用”,因此 ...
随机推荐
- i春秋Upload
打开是一句普普通通的话,先查看源码,发现提示,我们需要post我们从i春秋得到的东西 得到了什么呢?不知道,去看看cookie,没什么特别的地方,再去抓包试试 找到了我们需要post的东西,不过这东西 ...
- 将现有源码添加进repo管理
将现有源码添加进repo管理 适用于大型项内无源码管理(git/repo)的源码 前言 公司在进行一些项目的开发时,从供应商原厂给的code内没有包含任何源码管理的文件.需要多人协同开发,但由于项 ...
- 第2-4-6章 springboot整合规则引擎Drools-业务规则管理系统-组件化-中台
目录 7. Spring整合Drools 7.1 Spring简单整合Drools 7.1.1 以上代码均在drools_spring项目中 7.2 Spring整合Drools+web 7.2 以上 ...
- 1.3 Apache Hadoop的重要组成-hadoop-最全最完整的保姆级的java大数据学习资料
目录 1.3 Apache Hadoop的重要组成 1.3 Apache Hadoop的重要组成 Hadoop=HDFS(分布式文件系统)+MapReduce(分布式计算框架)+Yarn(资源协调框架 ...
- 【数据库】SQL-随机生成区间内数值、日期、字符串,mock数据
〇.概述 1.参考 2.其他 一.随机生成数值 1.随机生成函数random_int() -- 随机数生成函数,int版 CREATE OR REPLACE FUNCTION random_int( ...
- 【Hive】概念、安装、数据类型、DDL、DML操作、查询操作、函数、压缩存储、分区分桶、实战Top-N、调优(fetch抓取)、执行计划
一.概念 1.介绍 基于Hadoop的数据仓库工具,将结构化数据映射为一张表,可以通过类SQL方式查询 本质:将HQL转换成MapReduce程序 Hive中具有HQL对应的MapReduce模板 存 ...
- view-design table的renderHeader中hover添加checkboxGroup遇到的问题
示例demo https://codepen.io/sphjy/pen/mdKaQJZ 问题见图 勾选多个复选框 on-change事件返回的数据只有当前点击的这一项,而且设置在checkboxGro ...
- 我今天吃了SHI,请对下联
最近看到不少好玩的.实用的 Github 项目,就来给大家推荐一把. 1. 跨平台终端 Tabby(前身是 Terminus) 是一个可高度配置的终端模拟器和 SSH 或串口客户端,支持 Window ...
- JavaScript:立即执行函数
想象一下,如果我希望某个代码块,只执行一次,就不再执行,应该怎么办? 代码块肯定是用函数来表示,执行肯定是调用函数,但是确保只执行一次,该怎么办? 我们为什么可以多次调用函数,因为函数名指向了函数的内 ...
- CH334、CH335USB2.0Hub芯片(更新ing)
USB HUB又称USB集线器,主要用于USB主机端口扩展,广泛应用于计算机,笔记本,及周边应用.CH334.CH335是符合 USB2.0 协议规范的高性能MTT 4 端口 USB2.0 HUB ...