vue + vant 移动端适配
1. 设置动态根字号大小,/public/phone-adapt.js,在index.html中引入
(function (doc, win) {
const docEl = win.document.documentElement;
const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
const resizeRem = function () {
const clientWidth = win.innerWidth || doc.documentElement.clientWidth || doc.body.clientWidth; if (!clientWidth) return;
const width = clientWidth;
const fontSize = 20 * width / 375; // 设置根字号为20px
docEl.style.fontSize = fontSize + 'px';
}; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, resizeRem, false);
resizeRem();
})(document, window);
2. 安装postcss-pxtorem,将vant里面的px转成rem
npm install postcss-pxtorem --save-dev
3. 配置postcss.config.js,如果没有这个文件就新建一个
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 20, // vant-UI的官方根字体大小是37.5
propList: ['*']
}
}
}
4. 重启项目即可。
vue + vant 移动端适配的更多相关文章
- Vue CLI3 移动端适配 【px2rem 或 postcss-plugin-px2rem】
Vue CLI3 移动端适配 [px2rem 或 postcss-plugin-px2rem] 今天,我们使用Vue CLI3 做一个移动端适配 . 前言 首先确定你的项目是Vue CLI3版本以上的 ...
- Vue+vant移动端处理弹窗不能滑动问题
自己在做项目开发时,使用vantUI组件,在项目中遇到了弹窗组件里面当内容过多时,会出现滚动卡顿或者不能滚动问题,开始一直以为是自己的样式写的有问题,检查下来才发现并不是,而是弹窗组件的问题,于是找到 ...
- 基于vue-cli的vue项目移动端样式适配,lib-flexible和postcss-px2rem
安装 flexible和 postcss-px2rem(命令行安装) npm install lib-flexible --save npm install postcss-px2rem --save ...
- 基于vue-cli3的vue项目移动端样式适配,lib-flexible和postcss-px2rem
1,安装 flexible和 postcss-px2rem(命令行安装) npm install lib-flexible --save npm install postcss-px2rem --sa ...
- vue中使用vw适配移动端
推荐看看大漠老师的文章,非常的有收获 如何在Vue项目中使用vw实现移动端适配 1.首先在项目中安装依赖 npm i postcss-aspect-ratio-mini postcss-px-to-v ...
- 全栈前端入门必看 koa2+mysql+vue+vant 构建简单版移动端博客
koa2+mysql+vue+vant 构建简单版移动端博客 具体内容展示 开始正文 github地址 <br/> 觉得对你有帮助的话,可以star一下^_^必须安装:<br/> ...
- 基于Vue/React项目的移动端适配方案
本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率. 下文给出了本人分别使用create-re ...
- 解决vue移动端适配问题
1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点字体的大小.所以不用px; 根字体:字体的大小px; px:你就当成cm(厘米)这样的东西吧: 基 ...
- vue-cli3.0结合lib-flexible、px2rem实现移动端适配,完美解决第三方ui库样式变小问题
公司最近做的一个移动端项目从搭框架到前端开发由我独立完成,以前做移动端适配用的媒体查询,这次想用点别的适配方案,然后就采用了vue-cli3.0结合lib-flexible.px2rem实现移动端适配 ...
- 从flexible.js引入高德地图谈起的移动端适配
曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...
随机推荐
- docker-compose 文件
安装 curl -L https://get.daocloud.io/docker/compose/releases/download/v2.4.1/docker-compose-`uname -s` ...
- kafka监控系统kafka eagle安装和使用
一.kafka eagle介绍 kafka eagle 是一款由国内公司开源的Kafka集群监控系统,可以用来监视kafka集群的broker状态.Topic信息.IO.内存.consumer线程.偏 ...
- Vulnhub 靶场 HMS?: 1
Vulnhub 靶场 HMS?: 1 前期准备: 靶机地址:https://www.vulnhub.com/entry/hms-1,728/ 攻击机ip:192.168.147.190 靶机ip:19 ...
- 关于sql json数据的处理
$resultProductPrice = DB::update("update lev_product_price set detail=json_set(detail,'$.颜色','红 ...
- select multiple 浏览器兼容
select multiple 时一般是设置 height <select multiple="multiple" style="height:87px;" ...
- 解决 http://www.diamond-sh.com/favicon.ico 404 (Not Found) 报错问题
html5页面中经常会遇到这个报错,解决方法有以下两种: 1. 根目录下建一个个favicon.ico文件,在head标签引入favicon.ico文件即可 <link href="f ...
- OPENCV3 API
图像翻转 void flip(InputArray src, OutputArray dst, int flipCode); flipCode: 0: x 轴翻转 1: y 轴翻转 <0: x, ...
- 常用软件版本记录 lisoaring
操作系统 windows XP(2014年4月8日) windows 7(2020年1月14日终止支持) wiindows 10 Internet Explorer 1995-20220507 Fla ...
- disp
str = sprintf( 'Best Cross Validation MSE = %g Best c = %g Best g = %g',bestmse,bestc,bestg); disp(s ...
- react的生命周期和使用
完整的生命周期 我们都知道生命周期分为三个大阶段: 挂载 更新 卸载 挂载的时候我们我们有 constructor . getDerivedStateFromProps .render . compo ...