一、动态rem适配方案：适合H5项目的适配方案 1. @media媒体查询适配 首先，我们需要设置一个根元素的基准值，这个基准值通常根据视口宽度进行计算。可以在项目的 CSS 文件中，通过媒体查询动态

在开发移动端的时候需要适配各种机型，有大的，有小的，我们需要一套代码，在不同的分辨率适应各种机型。 因此我们需要设置meta标签 移动设备具有各种不同的屏幕尺寸和分辨率，例如智能手机和平板电脑。为了提

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

使用vite新建vue项目 通过 npm 安装 vant 在现有项目中使用 Vant 时，可以通过 npm 进行安装： 常规用法 1、引入vant 2、使用vant组件和 API 完成以上步骤，就可以

读完本篇，可以了解到移动端页面如何适配各种尺寸的屏幕，包括pc端，另外如何将触摸事件转换成鼠标事件。

很多人聊起移动端适配都是懵逼状态，都想口吐芬芳。难道移动端还要适配，直接px写死，其他自适应不就完了吗？其实不然，要求严格的公司会要求缩放比例完全相同，简单说就是，在每个手机上的每一行的字数都要一样。接下来，我们就要细说移动端适配的前世今生 相信我们所有前端开发者，都是见证了手…

随着时间的发展，现在基本上人手一部手机的低头族。做为前端开发的程序猿，在开发移动端web应用的时候，对面一堆各色尺寸不一样的屏幕，就有点淡淡的忧伤。 很明显我们所要实现的就是在上述如此之多的屏幕,都能实现UI大大出的视觉图上的效果。而要实现这样的效果主要有两个难点 各屏幕的适配…

... 上面这些问题可能我们在开发中已经知道如何解决，但是问题产生的原理，以及解决方案的原理可能会模糊不清。在解决这些问题的过程中，我们往往会遇到非常多的概念：像素、分辨率、PPI、DPI、DP、DIP、DPR、视口等等，你真的能分清这些概念的意义吗？ 本文将从移动端适配的基础…

1. 视口 viewport viewport 解释为中文就是‘视口’的意思，也就是浏览器中用于显示网页的区域。在 PC 端，其大小也就是浏览器可视区域的大小，所以我们也不会太关注此概念；而在移动端，绝大多数情况下 viewport 都大于浏览器可视区，保证 PC 页面在移动浏…