文章主要是写Vue3+Vite+H5适配的，因为踩了一些适配的坑，所以就写一篇文章记录一下，不喜勿喷哈！

在混合应用开发中，一种常见且成熟的技术方案是将原生应用与 WebView 结合，使得复杂的业务逻辑可以通过网页技术实现。实现这种类型的混合应用时，就需要解决H5与Native之间的双向通信。

前端适配PC端、移动端. 基于vw或者rem进行适配.只需一次配置即可,也介绍到了IOS的安全区域.

常见的几种可视化适配方案如下 vw，vh：主要是将设计稿px通过计算换算成vw，vh， 可以进行同比缩放但是同时又不会出现白边的情况【唯一的缺陷是比较麻烦：要为每一个图表单独设置 字体、间距、位移 的

背景 在rem / vw文章或者视频的评论区，总会有第三个声音：flex & px才是最优解！（蒙蔽，主要是因为不懂）

移动互联网发展至今，各种移动设备应运而生，但它们的物理分辨率可以说是五花八门，还不了解H5移动端适配的看这篇文章就够了

当接到可视化大屏需求时，你是否会有以下疑问：如何做一款定制化的数据大屏？ 开发可视化数据大屏如何做自适应？ vm vh、rem、scale 到底哪种比较好？ 时间不够，有没有偷懒的方法？

问题背景 目前项目面临以下几个问题 1.项目整体是pc端项目，只是某几个页面为移动端，不需要所有的页面都进行移动端适配 3.设计稿750px，vant的设计稿为375，vite中使用vw不好设置基准值

vue3语法糖 基于移动端的配置。template组件自动引入，无需import，不是template组件的需要手动引入。自动导入vue3 HOOKS