vue3.0项目中运用vant的以及移动端的适配

news2025/3/10 10:56:20

文章目录

    • 概要
    • 移动端的适配
    • vant的引入
    • 开发以及打包过程中遇到的问题

概要

在Vue-Vben-Admin项目中运用vant-ui实现部分页面支持手机端h5页面的预览

移动端的适配

  1. 适配的原理

    • 自适应 根据不同的设备的屏幕大小来自动调整尺寸，大小
    • 响应式 会随着屏幕的变动而自动调整，是一种更强的自适应

  2. 当前流行的几种适配方案

    • 百分比设置（不推荐）

      因为不同属性的百分比值，相对的可能是不同参照物，所以百分比往往很难统一
      所以百分比在移动端适配中使用是非常少的

    • rem单位+动态html的font-size
    • vw单位（推荐，项目中运用的此方案）
    • flex的弹性布局

  3. rem + 动态设置 font-size
    rem 单位是相对于 html 元素的 font-size 来设置的，通过在不同屏幕尺寸下，动态的修改 html 元素的 font-size 以此来达到适配效果

    屏幕尺寸html的font-size盒子的设置宽度盒子的最终宽度
    375px37.5px1rem37.5px
    320px32px1rem32px
    414px41.4px1rem41.4px
    • 1） px 与 rem 的单位换算

    根元素 html 的文字大小 = 视口宽度/分成的份数(一般为10份，方便计算)
    rem 值 = 元素的 px 值 / 根元素 html 的文字大小
    比如有一个在375px屏幕上，100px宽度和高度的盒子
    我们需要将100px转成对应的rem值
    100/37.5=2.6667，其他也是相同的方法计算即可

    • 2） less/scss函数
    .pxToRem(@px) {
  result: 1rem * (@px / 37.5);
}

.box {
  width: .pxToRem(100)[result];
  height: .pxToRem(100)[result];
  background-color: orange;
}

p {
  font-size: .pxToRem(14)[result];
}

    • 3） postcss-pxtorem

      目前在前端的工程化开发中，我们可以借助于webpack的工具来完成自动的转化
      npm install postcss-pxtorem

    • 4） VSCode插件
      -
      在这里插入图片描述

  4. 媒体查询
    通过媒体查询来设置不同尺寸屏幕下 html 的 font-size

    需要针对不同的屏幕编写大量的媒体查询
    如果动态改变尺寸，不会实时更新，只是一个个区间

    // 屏幕宽度最小320是的样式
@media screen and (min-width: 320px) {
   html {
     font-size: 20px;
   }
}
// 屏幕宽度小于375px是的样式
@media screen and (min-width: 375px) {
  html {
    font-size: 24px;
  }
}
// 屏幕宽度小于414px是的样式
@media screen and (min-width: 414px) {
  html {
    font-size: 28px;
  }
}
// 屏幕宽度小于480px是的样式
@media screen and (min-width: 480px) {
  html {
    font-size: 32px;
  }
}

  5. 编写 js 代码
    通过监听屏幕尺寸的变化来动态修改 html 元素的 font-size 大小

    根据 html 的宽度计算出 font-size 的大小，并设置到 html 上
    监听页面尺寸的变化，实时修改 font-size 大小

    function setRemUnit() {
  // 获取所有的 html 元素
  const htmlEl = document.documentElement
  // 375 -> 16px
  // 320px -> 12px
  // 我们需要动态更改字体大小，因此需要获取网页的宽度
  // 拿到客户端宽度
  const htmlWidth = htmlEl.clientWidth
  // 将宽度分成10份
  const htmlFontSize = htmlWidth / 10
  console.log('htmlFontSize', htmlFontSize);
  // 将值给到html的font-size
  htmlEl.style.fontSize = htmlFontSize + 'px'
}

setRemUnit()
// 给 window 添加监听事件
window.addEventListener('resize', setRemUnit)

  6. lib-flexible 库
    lib-flexible 是淘宝团队出品的一个移动端自适应解决方案，通过动态计算 viewport 设置 font-size 实现不同屏幕宽度下的 UI 自适应缩放。

    (function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

  7. vw 适配方案
    100vw 相当于整个视口的宽度 innerWidth，1vw 相当于视口宽度的 1%，将 px 转换为 vw 即可完成适配，其实上面的 rem 就是模仿 vw 方案

vw相比于rem的优势：
不需要去计算 html 的 font-size 大小，也不需要去给 html 设置 font-size
不会因为设置 html 的 font-size 大小，而必须再给 body 设置一个 font-size 防止继承
因为不依赖 font-size 的尺寸，所以不用担心某些原因的 html 的 font-size 尺寸被篡改，导致页面尺寸混乱
vw 更加语义话，1vw 相当于 1/100 viewport 的大小
rem 事实上作为一种过渡的方案，它利用的也是 vw 的思想

  1. px 与 vw 的单位转换

    • 手动换算
      比如屏幕尺寸为 375px，元素大小为 150px，我们需要将 150px 转换成对应的 vw 值：150 / 3.75=40
    • less/scss 函数
    @vwUnit: 3.75;
.pxToVw(@px) {
  result: (@px / @vw) * 1vw
}
.box {
  width: .pxToVw(100)[result];
  height: .pxToVw(100)[result];
}
    • postcss-px-to-viewport-8-plugin
      1：和rem一样，在前端的工程化开发中，我们可以借助于webpack的工具来完成自动的转化
      2： npm install postcss-px-to-viewport-8-plugin
    • vs Code 插件
      px to vw 插件，在编写时自动转化：
      在这里插入图片描述

  2. postcss-px-to-viewport的优缺点

    • 优点：
    1. 实现简单：只需要通过安装插件和配置即可快速实现 px 转换为 vw 或 vh 单位。
    2. 提高开发效率：使用自适应布局，可以减少对不同屏幕尺寸的适配工作，提高开发效率。
    3. 适配性强：可以自适应不同设备和屏幕尺寸，适配性强，可以适应各种移动端设备的屏幕尺寸。
    • 缺点：
    1. 不适用于字体大小：由于 vw 和 vh 单位不适用于字体大小，因此需要单独设置字体大小的转换方式。 兼容性问题：一些老版本的浏览器不支持
    2. vw 和 vh 单位，需要使用兼容性处理或回退方案。 无法把行内样式中的 px 转换成视口单位（vw, vh, vmin, vmax）
    3. 无法精确 控制样式：由于浏览器的视口宽度和高度不同，转换后的样式可能会有一定的误差，无法精确控制样式

vant的引入

# Vue 3 项目，安装最新版 Vant
npm i vant

# Vue 2 项目，安装 Vant 2
npm i vant@latest-v2
  • 配置支持适配 build\vite\plugin\imagemin.ts文件配置
import { createStyleImportPlugin, VantResolve } from 'vite-plugin-style-import';
  const styleImportPlugin = createStyleImportPlugin({
      {
        libraryName: 'vant',
        esModule: true,
        resolveStyle: (name) => {
          if (name == 'show-toast') {
            return `../es/toast/style/index`; //修改vant show-toast引入路径
          } else if (name == 'show-confirm-dialog') {
            return `../es/dialog/style/index`; //修改vant show-toast引入路径
          } else {
            return `../es/${name}/style`; //修改vant引入路径
          }
        },
      },
    ],
    resolves: [VantResolve()],
  });
  • 配置支持适配 build\vite\plugin\imagemin.ts文件配置
import pxtovw from 'postcss-px-to-viewport';

const loader_pxtovw = pxtovw({
  unitToConvert: 'px', // 要转化的单位
  viewportWidth: 750, // UI设计稿的宽度
  unitPrecision: 6, // 转换后的精度，即小数点位数
  propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
  viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
  fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
  selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名，
  minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
  mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
  replace: true, // 是否转换后直接更换属性值
  exclude: [
    /node_modules/,
    /sys/,
    /layouts/,
    /Application/,
    /approvalProcess/,
    /Authority/,
    /AvatarPreview/,
    /Basic/,
    /Button/,
    /CardList/,
    /ClickOutSide/,
    /CodeEditor/,
    /Container/,
    /ContextMenu/,
    /CountDown/,
    /CountTo/,
    /Cropper/,
    /CustomerModal/,
    /CustomRecorder/,
    /CustomTinymce/,
    /Drawer/,
    /Dropdown/,
    /Excel/,
    /FlowChart/,
    /Form/,
    /Icon/,
    /JVxeTable/,
    /Loading/,
    /Markdown/,
    /Menu/,
    /Modal/,
    /Page/,
    /Poi/,
    /Preview/,
    /Qrcode/,
    /Scrollbar/,
    /Signature/,
    /SimpleMenu/,
    /StrengthMeter/,
    /Table/,
    /Time/,
    /Tinymce/,
    /Transition/,
    /Tree/,
    /Upload/,
    /Verify/,
    /VirtualScroll/,
    /VxeTable/,
    /Verify/,
    /design/,
    /directives/,
    /enums/,
    /hooks/,
    /basic/,
    /business/,
    /dashboard/,
    /demo/,
    /devOperation/,
    /ecommerce/,
    /form-design/,
    /lamp/,
    /medical/,
    /medical-Group/,
    /medical-Shop/,
    /shop/,
    /supplyChain/,
    /index.html/,
  ], // 设置忽略文件，用正则做目录名匹配
  include: [/vant/, /pda/], // 如果设置了include，那将只有匹配到的文件才会被转换
  landscape: false, // 是否处理横屏情况
});
css: {
    postcss: {
      plugins: [loader_pxtovw],
    },
    preprocessorOptions: {
      less: {
        modifyVars: generateModifyVars(),
        javascriptEnabled: true,
      },
    },
  },

由于是web端ui组件和vantUI组件兼容所有设置的 exclude和include

开发以及打包过程中遇到的问题

打包报如下图展示
解决方法：

 if (name == 'show-toast') {
   return `../es/toast/style/index`; //修改vant show-toast引入路径
 } else if (name == 'show-confirm-dialog') {
    return `../es/dialog/style/index`; //修改vant show-toast引入路径
  } else {
    return `../es/${name}/style`; //修改vant引入路径
  }

引入样式报错

import 'vant/lib/index.css';

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1623471.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

文末送资料|跟着开源学技术-ChatGPT开源项目-chatgpt-java

文末送资料|跟着开源学技术-ChatGPT开源项目-chatgpt-java

目录 功能特性 最简使用 进阶使用 函数调用（Function Call） 流式使用 流式配合Spring SseEmitter使用 多KEY自动轮询 大家好，我是充电君 今天带着大家来看个Java版本的ChatGPT。这个开源项目就是chatgpt-java。 Github： h…
阅读更多...
gitcode 上传文件报错文件太大has exceeded the upper limited size

gitcode 上传文件报错文件太大has exceeded the upper limited size

报错 remote: Start Git Hooks Checking Error: Deny by project hooks setting ‘default’ has exceeded the upper limited size (10 MB) in commit 当前有效的解决方案 项目设置->提交设置->勾选管理员不受规则限制->提交 重新push，提交成功
阅读更多...
计算机提示dll文件缺失如何恢复？多种方法快速一键修复dll问题

计算机提示dll文件缺失如何恢复？多种方法快速一键修复dll问题

动态链接库（DLL）是Windows操作系统中不可或缺的一部分，它们封装了大量的函数、类和资源，供多个应用程序共享使用，以实现功能复用、节省内存和简化软件部署。然而，在日常使用或软件开发过程中，我…
阅读更多...
pycharm爬虫模块（scrapy）基础使用

pycharm爬虫模块（scrapy）基础使用

今天学了个爬虫。在此记录 目录 一.通过scrapy在命令行创建爬虫项目 二.判断数据为静态还是动态 三.pycharm中的设置 三:爬虫主体 四.pipelines配置（保存数据的） 五.最终结果 一.通过scrapy在命令行创建爬虫项目 1.首先需要在cmd中进入到python文…
阅读更多...
MySQL——运维

MySQL——运维

日志 错误日志 错误日志是 MySQL 中最重要的日志之一，它记录了当 mysqld 启动和停止时，以及服务器在运行过程中发生任何严重错误时的相关信息。当数据库出现任何故障导致无法正常使用时，建议首先查看此日志。 查看日志位置： sho…
阅读更多...
招商画册不会制作？这个教程收藏好

招商画册不会制作？这个教程收藏好

在制作招商画册过程中可能对于一些小型企业或刚刚起步的企业来说，招商画册的制作也不是一个难以克服的难题。本文将为您提供一些制作招商画册的技巧和建议。在制作招商画册前肯定是需要选择一款合适的在线制作工具，如FLBOOK 这个平台本就有海量的模板和设…
阅读更多...
【Git教程】（十六）基于构建服务器的工作 — 概述及使用要求，执行过程及其实现，替代解决方案 ~

【Git教程】（十六）基于构建服务器的工作 — 概述及使用要求，执行过程及其实现，替代解决方案 ~

Git教程 基于构建服务器的工作 1️⃣ 概述2️⃣ 使用要求3️⃣ 执行过程及其实现3.1 预备构建服务器3.2 构建服务器上的 Git3.3 比对本地开发版本与最后成功构建版本之间的差异3.4 基于构建历史的排错 4️⃣ 替代解决方案4.1 使用标签4.2 将构建历史放在中央版本库中 许多项目…
阅读更多...
设计模式（六）：原型模式

设计模式（六）：原型模式

设计模式（六）：原型模式 1. 原型模式的介绍2. 原型模式的类图3. 原型模式的实现3.1 创建一个原型接口3.2 创建具体原型3.3 创建一个数据缓存类3.4 测试 1. 原型模式的介绍 原型模式（Prototype Pattern）属于创建型模式&…
阅读更多...
ctfshow web29-web40

ctfshow web29-web40

命令执行 看清都过滤了些什么！！ 知识点： web34：当;和()被过滤了就用语言结构，一般有echo print isset unset include require web37：data协议是将后面的字符串当成php代码执行，例如 /?cdat…
阅读更多...
LabVIEW学习记录2 - MySQL数据库连接与操作

LabVIEW学习记录2 - MySQL数据库连接与操作

LabVIEW学习记录2 - MySQL数据库连接与操作 一、前期准备1.1 windows下安装MySQL的ODBC驱动 二、LabVIEW创建MySQL 的UDL文件三、LabVIEW使用UDL文件进行MySQL数据库操作3.1 建立与数据库的连接：DB Tools Open Connection.vi3.2 断开与数据库的连接：DB T…
阅读更多...
如何通过ABAP将数据写回BPC模型

如何通过ABAP将数据写回BPC模型

今天给大家安利一个标准方法，主要用于回写BPC模型数据，一般情况下，BPC模型数据的回写，标准的方式有数据抽取，直接抽取供数模型的数，利用BW标准转换方式进行供数，又或者通过逻辑脚本BADI的方式直…
阅读更多...
【数据结构】哈希桶

【数据结构】哈希桶

目录 前言： 开散列（哈希桶） 开散列的概念 哈希桶的模拟实现 整体框架 查找 插入 删除 析构函数 前言： 闭散列线性探测缺点：一旦发生哈希冲突，所有的产生哈希冲突的数据连续存储在一块区域&#xff…
阅读更多...
【Github】sync fork后，意外关闭之前提交分支的pr申请 + 找回被关闭的pr请求分支中的文件

【Github】sync fork后，意外关闭之前提交分支的pr申请 + 找回被关闭的pr请求分支中的文件

【Github】sync fork后，意外关闭之前提交分支的pr申请 找回被关闭的pr请求分支中的文件 写在最前面原因解析提交pr，pr是什么？rebase 或者 merge 命令 找到分支中被删除的文件找到被关闭的提交请求pr方法1：在公共仓库被关闭的pr中…
阅读更多...
NXP i.MX8系列平台开发讲解 - 3.9 Linux PCIe协议相关介绍（二）

NXP i.MX8系列平台开发讲解 - 3.9 Linux PCIe协议相关介绍（二）

目录 1. PCIe 传输层协议 2. TLP介绍 2.1 TLP包格式 2.2 TLP包的种类 2.3 TLP 包传输例子 2.4 TLP 路由规则 根据上一章的知识，对于PCIe的发展和基础知识有了大概了解，本章节将会讲解PCIe的一些工作原理，使用的协议，通信交互…
阅读更多...
ubuntu 复制文件路径

ubuntu 复制文件路径

前言 我打算搞一个ubuntu右键复制文件路径的插件，但是找不到，只能平替 这个配置，可以把文件拖拽到cmd窗口，然后就直接cmd输出文件路径 配置 cd ~ vim .bashrc 在文件结尾添加 cdd () { ddirname "$1"; echo …
阅读更多...
【C++初阶】第八站：string类的模拟实现

【C++初阶】第八站：string类的模拟实现

目录 string类的模拟实现 经典的string类问题 浅拷贝 深拷贝 写时拷贝(了解) 构造函数 string的全缺省的构造函数： string的拷贝构造函数 传统写法 现代写法 string的赋值重载函数 传统写法 现代写法 string的无参构造函数： 遍历函数 op…
阅读更多...
ASP.NET Core 3 高级编程(第8版) 学习笔记 03

ASP.NET Core 3 高级编程(第8版) 学习笔记 03

本篇介绍原书的第 18 章，为 19 章 Restful Service 编写基础代码。本章实现了如下内容： 1）使用 Entity Framework Core 操作 Sql Server 数据库 2）Entity Framework Core 数据库迁移和使用种子数据的方法 3）使用中间件…
阅读更多...
【黑马头条】-day11热点文章实时计算-kafka-kafkaStream-Redis

【黑马头条】-day11热点文章实时计算-kafka-kafkaStream-Redis

文章目录 今日内容1 实时流式计算1.1 应用场景1.2 技术方案选型 2 Kafka Stream2.1 概述2.2 KafkaStream2.3 入门demo2.3.1 需求分析2.3.2 实现2.3.2.1 添加依赖2.3.2.2 创建快速启动，生成kafka流2.3.2.3 修改生产者2.3.2.4 修改消费者2.3.2.5 测试 2.4 SpringBoot集…
阅读更多...
机器学习作业3____决策树（CART算法）

机器学习作业3____决策树（CART算法）

目录 一、简介 二、具体步骤 样例： 三、代码 四、结果 五、问题与解决 一、简介 CART（Classification and Regression Trees）是一种常用的决策树算法，可用于分类和回归任务。这个算法由Breiman等人于1984年提出，它…
阅读更多...
Clion连接MySQL数据库：实现C/C++语言与MySQL交互

Clion连接MySQL数据库：实现C/C++语言与MySQL交互

确保你的电脑里已经有了MySQL。 1、找到MySQL的目录 2、进入lib目录 3、复制libmysql.dll和libmysql.lib文件 4、将这俩文件粘贴到你的clion项目的cmake-build-debug目录下 如果不是在这个目录下，运行时会出以下错误报错： 进程已结束，退…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023