Vue3 之 vue3-mq适配移动端

玄鱼殇

于 2024-08-20 09:12:31 发布

阅读量306

点赞数 10

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/a15297701931/article/details/141341683

版权

一、前情提要

1. 需求

需求 : 在当前pc项目中，增加移动端页面

2. 安装

npm install vue3-mq

3. 尺寸须知

# 尺寸
xs	0
sm	576
md	768
lg	992
xl	1200
xxl	1400

二、项目配置

1. main.ts

// 移动端
import { Vue3Mq, MqResponsive } from 'vue3-mq'

const app = createApp(App)

// 引入移动端
app.use(Vue3Mq)
// 全局注册移动端组件
app.component('MqResponsive', MqResponsive)

2. 页面使用

<!-- 移动端: (尺寸0-768) -->
<MqResponsive target="xs-md">
    <MobileHome />
</MqResponsive>

<!-- pc端: (尺寸768以上) -->
<MqResponsive target="md+">
    <MobileHome />
</MqResponsive>