项目需求:
路由相同(链接),但是移动端和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