当前位置: 首页 > article >正文

Vue3项目匹配PC端和移动端---一套组件

        只写一套组件同时适配 PC 和移动端,通过 响应式布局(弹性布局 Flexbox 、Grid CSS 媒体查询(@media), 根据屏幕宽度动态调整组件的样式,从而实现一套代码适配 PC 和移动端

没有Vue3项目,创建一个项目

npm create vite@latest my-vue-app --template vue
cd my-vue-app
npm install
npm run dev

在 src/components 目录创建组件 ResponsiveComponent.vue

<template>
    <div class="responsive-container">
      <h1>响应式布局示例</h1>
      <div class="content">
        <div class="box">Box 1</div>
        <div class="box">Box 2</div>
        <div class="box">Box 3</div>
      </div>
    </div>
  </template>
  
  <script setup>
  // 这里不需要额外的逻辑
  </script>
  
  <style scoped>
  .responsive-container {
    padding: 20px;
    background-color: #f0f0f0;
    text-align: center;
  }
  
  .content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }
  
  .box {
    background-color: #409eff;
    color: white;
    padding: 20px;
    border-radius: 8px;
    flex: 1 1 calc(30% - 40px); /* 默认 PC 端:3 列 */
    max-width: calc(30% - 40px);
  }
  
  /* 移动端适配 */
  @media (max-width: 768px) {
    .box {
      flex: 1 1 100%; /* 移动端:1 列 */
      max-width: 100%;
    }
  }
  </style>

App.vue

主题切换:

Vue3+Pinia 实现主题切换-CSDN博客

<template>
  <div id="app">
    <ResponsiveComponent />

    <h1>主题切换示例</h1>
    <button @click="toggleTheme">切换主题</button>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useThemeStore} from './store/themeStore'
import ResponsiveComponent from './components/ResponsiveComponent.vue'


const themeStore = useThemeStore()

// 初始化时用当前主题
onMounted(() => {
  themeStore.applyTheme(themeStore.currentTheme)
})

const toggleTheme = () => {
  // const newTheme = themeStore.currentTheme === 'light' ? 'blue' : 'light'
  // themeStore.setTheme(newTheme)

  // 多个主题切换
  let themes = ['light', 'blue', 'dark', 'green']
  let currentIndex = themes.indexOf(themeStore.currentTheme)
  let newTheme = themes[(currentIndex + 1) % themes.length] 
  themeStore.setTheme(newTheme)
}


</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  background-color: var(--bg-color);
  /* color: var(--text-color); */
  height: 100vh;
  padding: 20px;
  transition: background-color 0.3s, color 0.3s;
}
button {
  background-color: var(--primary-color);
  color: var(--text-color);
  border: none;
}
</style>

启动项目

npm run dev

PC端

移动端

flex布局改为grid布局:

<template>
    <div class="responsive-grid">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
    </div>
  </template>
  
  <script setup>
  // 这里不需要额外的逻辑
  </script>
  
  <style scoped>
  .responsive-grid {
    display: grid;
    gap: 20px;
    padding: 20px;
  }
  
  .item {
    background-color: #409eff;
    color: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
  }
  
  /* PC 端:3 列 */
  @media (min-width: 768px) {
    .responsive-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  /* 移动端:1 列 */
  @media (max-width: 768px) {
    .responsive-grid {
      grid-template-columns: 1fr;
    }
  }
  </style>


http://www.kler.cn/a/589936.html

相关文章:

  • MATLAB语言的编程竞赛
  • 沉浸式vr大空间打造,打造超真实的虚拟体验
  • 【教学类-43-25】20240311 数独3宫格的所有可能(图片版 12套样式,空1格-空8格,每套510张,共6120小图)
  • 配置 VSCode 的 C# 开发环境
  • Matlab 基于专家pid控制的时滞系统
  • Tree of Thought Prompting(思维树提示)
  • 如何在 K8s 内部实现安全的网络隔离?
  • 掌握Python项目的依赖管理:利用`venv`与`conda`高效创建虚拟环境
  • 深度解析ECharts.js:构建现代化数据可视化的利器
  • c++图论(一)之图论的起源和图的概念
  • 【MySQL】MySQL审计工具Audit Plugin安装使用
  • 工作记录 2017-01-25
  • 树莓派上的 TensorFlow Lite:从零开始的摄像头图像识别
  • python-数据结构汇总,树图、代码讲解(字符串、数组、字典、集合、元组)
  • 5分钟快速申请一个EDU教育邮箱
  • Qt选择文件路径,并写入文件
  • 华为hcia——Datacom实验指南——Ping和Tracert的工作原理
  • 【自学笔记】Solidity基础知识点总览-持续更新
  • Excel导出工具类--复杂的excel功能导出(使用自定义注解导出)
  • 图文详解部署deepseekR1模型:Win11本地部署deepseek R1:7B大模型:Ollama+deepseekR1+OpenWebUI+Hyper-V部署教程。 模型参数70亿