项目需求:
路由相同（链接），但是移动端和PC端打开的界面完全不同
由于该查询链接可以在pc端打开，也可以发给别人，别人直接用手机打开，所以该search页面需要适配移动端和pc端。又因为移动端和pc端的设计页面差别过大，导致我们无法使用响应式的方式来处理，所以我们需要分别写两个页面来对应移动端和pc端的页面(这两页面都是在同一个vue项目)
大致效果：
pc端:
移动端：
解决方案:
跳转到search页面之后，使用v-if来判断是显示移动端的组件还是pc端的组件
在mounted中调用，判断设备的方法，才知道显示的是哪个组件。
判断移动端的方法如下:
// 判断是否是移动端
export function isMobile() {
const flag = navigator.userAgent.match(
/(phone|pad|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows phone)/i
)
return flag
}
tips：这里使用的是组件的方式来处理的。其实也可以用路由的方式来处理，将移动端和pc端都写成一个路由，如/pc和/mobile,然后我们在/search页面判断设备，如果是手机则在mounted中跳转手机的页面，不是则pc端。这样子用路由的方式也可以达到目的。
其他：
移动端虽然只是有几个页面，但是我们还是需要使用到vant并且进行适配的。
1.vant使用：
a.安装vant
npm i vant
b.使用vant，这里直接是使用常规用法的方式来做了，因为用到的组件比较少，所以没必要全部导入
import {
createApp } from 'vue';
// 1. 引入你需要的组件
import {
Button } from 'vant';
// 2. 引入组件样式
import 'vant/lib/index.css';
const app = createApp();
// 3. 注册你需要的组件
app.use(Button);
2.适配移动端
因为我们pc端的项目是已经做了响应式适配的，不需要再进行适配了，但是移动端的话还是需要适配的，不然跟着UI的750px的设计稿不适配，会有很大的问题。所以我们选择了vant的vw方案。
a.安装依赖：
npm install postcss-px-to-viewport -D
b.在vite.config.ts中配置:
import postcsspxtoviewport from 'postcss-px-to-viewport'
css: {
postcss: {
plugins: [
postcsspxtoviewport({
unitToConvert: 'px', // 要转化的单位
viewportWidth: 750, // UI设计稿的宽度
unitPrecision: 6, // 转换后的精度，即小数点位数
propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名，
minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
mediaQuery: false, // 是否在媒体查询的css代码中也进行转换，默认false
replace: true, // 是否转换后直接更换属性值
// exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
// exclude: [],
include: [/form-info-card/,/mobile-page/, /shareMb/, /editMb/], //如果设置了include，那将只有匹配到的文件才会被转换
landscape: false // 是否处理横屏情况
})
},
在使用这个vw方案的时候还出现了很多其他的问题（比如只适配移动端页面但是include不生效，以及如何针对vant做适配），如下面这篇文章，大家做的时候也可以看看。
其他出现的问题处理如该文章：https://blog.csdn.net/weixin_43239880/article/details/132405008?spm=1001.2014.3001.5501