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 移动端适配的更多相关文章

  1. Vue CLI3 移动端适配 【px2rem 或 postcss-plugin-px2rem】

    Vue CLI3 移动端适配 [px2rem 或 postcss-plugin-px2rem] 今天,我们使用Vue CLI3 做一个移动端适配 . 前言 首先确定你的项目是Vue CLI3版本以上的 ...

  2. Vue+vant移动端处理弹窗不能滑动问题

    自己在做项目开发时,使用vantUI组件,在项目中遇到了弹窗组件里面当内容过多时,会出现滚动卡顿或者不能滚动问题,开始一直以为是自己的样式写的有问题,检查下来才发现并不是,而是弹窗组件的问题,于是找到 ...

  3. 基于vue-cli的vue项目移动端样式适配,lib-flexible和postcss-px2rem

    安装 flexible和 postcss-px2rem(命令行安装) npm install lib-flexible --save npm install postcss-px2rem --save ...

  4. 基于vue-cli3的vue项目移动端样式适配,lib-flexible和postcss-px2rem

    1,安装 flexible和 postcss-px2rem(命令行安装) npm install lib-flexible --save npm install postcss-px2rem --sa ...

  5. vue中使用vw适配移动端

    推荐看看大漠老师的文章,非常的有收获 如何在Vue项目中使用vw实现移动端适配 1.首先在项目中安装依赖 npm i postcss-aspect-ratio-mini postcss-px-to-v ...

  6. 全栈前端入门必看 koa2+mysql+vue+vant 构建简单版移动端博客

    koa2+mysql+vue+vant 构建简单版移动端博客 具体内容展示 开始正文 github地址 <br/> 觉得对你有帮助的话,可以star一下^_^必须安装:<br/> ...

  7. 基于Vue/React项目的移动端适配方案

    本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率. 下文给出了本人分别使用create-re ...

  8. 解决vue移动端适配问题

    1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点字体的大小.所以不用px; 根字体:字体的大小px; px:你就当成cm(厘米)这样的东西吧: 基 ...

  9. vue-cli3.0结合lib-flexible、px2rem实现移动端适配,完美解决第三方ui库样式变小问题

    公司最近做的一个移动端项目从搭框架到前端开发由我独立完成,以前做移动端适配用的媒体查询,这次想用点别的适配方案,然后就采用了vue-cli3.0结合lib-flexible.px2rem实现移动端适配 ...

  10. 从flexible.js引入高德地图谈起的移动端适配

    曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...

随机推荐

  1. docker-compose 文件

    安装 curl -L https://get.daocloud.io/docker/compose/releases/download/v2.4.1/docker-compose-`uname -s` ...

  2. kafka监控系统kafka eagle安装和使用

    一.kafka eagle介绍 kafka eagle 是一款由国内公司开源的Kafka集群监控系统,可以用来监视kafka集群的broker状态.Topic信息.IO.内存.consumer线程.偏 ...

  3. Vulnhub 靶场 HMS?: 1

    Vulnhub 靶场 HMS?: 1 前期准备: 靶机地址:https://www.vulnhub.com/entry/hms-1,728/ 攻击机ip:192.168.147.190 靶机ip:19 ...

  4. 关于sql json数据的处理

    $resultProductPrice = DB::update("update lev_product_price set detail=json_set(detail,'$.颜色','红 ...

  5. select multiple 浏览器兼容

    select multiple 时一般是设置 height <select multiple="multiple" style="height:87px;" ...

  6. 解决 http://www.diamond-sh.com/favicon.ico 404 (Not Found) 报错问题

    html5页面中经常会遇到这个报错,解决方法有以下两种: 1. 根目录下建一个个favicon.ico文件,在head标签引入favicon.ico文件即可 <link href="f ...

  7. OPENCV3 API

    图像翻转 void flip(InputArray src, OutputArray dst, int flipCode); flipCode: 0: x 轴翻转 1: y 轴翻转 <0: x, ...

  8. 常用软件版本记录 lisoaring

    操作系统 windows XP(2014年4月8日) windows 7(2020年1月14日终止支持) wiindows 10 Internet Explorer 1995-20220507 Fla ...

  9. disp

    str = sprintf( 'Best Cross Validation MSE = %g Best c = %g Best g = %g',bestmse,bestc,bestg); disp(s ...

  10. react的生命周期和使用

    完整的生命周期 我们都知道生命周期分为三个大阶段: 挂载 更新 卸载 挂载的时候我们我们有 constructor . getDerivedStateFromProps .render . compo ...