当前位置：首页 > news >正文

前端项目采用响式布局

news 来源：原创 2025/7/16 22:19:47

要让整个前端项目采用响应式布局，可以从多个方面进行优化，以下是一些具体的建议和实现方法：

1. 使用 ElementPlus 的响应式特性

ElementPlus 组件库本身提供了一些响应式的能力，例如 el-col 组件可以用于创建响应式的网格布局。你可以在需要的地方使用这些组件来实现响应式效果。

2. 使用媒体查询

媒体查询是实现响应式布局的常用方法，可以根据不同的屏幕尺寸应用不同的样式。

修改 `src/style.css`

:root {font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;line-height: 1.5;font-weight: 400;color-scheme: light dark;color: rgba(255, 255, 255, 0.87);background-color: #242424;font-synthesis: none;text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}a {font-weight: 500;color: #646cff;text-decoration: inherit;
}
a:hover {color: #535bf2;
}body {margin: 0;display: flex;place-items: center;min-width: 320px;min-height: 100vh;
}h1 {font-size: 3.2em;line-height: 1.1;
}button {border-radius: 8px;border: 1px solid transparent;padding: 0.6em 1.2em;font-size: 1em;font-weight: 500;font-family: inherit;background-color: #1a1a1a;cursor: pointer;transition: border-color 0.25s;
}
button:hover {border-color: #646cff;
}
button:focus,
button:focus-visible {outline: 4px auto -webkit-focus-ring-color;
}.card {padding: 2em;
}#app {max-width: 1280px;margin: 0 auto;padding: 2rem;text-align: center;
}@media (prefers-color-scheme: light) {:root {color: #213547;background-color: #ffffff;}a:hover {color: #747bff;}button {background-color: #f9f9f9;}
}/* 小屏幕设备（手机，小于 768px） */
@media (max-width: 767px) {#app {padding: 1rem;}/* 调整侧边栏宽度 */el-aside {width: 100% !important;}
}/* 中等屏幕设备（平板，768px 到 991px） */
@media (min-width: 768px) and (max-width: 991px) {#app {max-width: 750px;}
}/* 大屏幕设备（桌面，992px 到 1199px） */
@media (min-width: 992px) and (max-width: 1199px) {#app {max-width: 970px;}
}/* 超大屏幕设备（大桌面，1200px 及以上） */
@media (min-width: 1200px) {#app {max-width: 1170px;}
}

3. 修改 `src/components/Layout.vue`

<template><div><el-header><h1>Application Header</h1><div style="float: right;"><span v-if="userInfo">{{ userInfo.username }}</span><el-button @click="logout">Logout</el-button></div></el-header><el-container><el-aside :width="isMobile ? '100%' : '200px'"><el-menu :default-active="$route.name" mode="vertical"><el-menu-item index="Home"><template #title><el-icon><HomeFilled /></el-icon><span>Home</span></template><!-- 使用路由名称进行跳转 --><router-link :to="{ name: 'Home' }"></router-link></el-menu-item><el-menu-item index="Devices"><template #title><el-icon><Setting /></el-icon><span>Devices</span></template><!-- 使用路由名称进行跳转 --><router-link :to="{ name: 'Devices' }"></router-link></el-menu-item><el-menu-item index="Alarms"><template #title><el-icon><Bell /></el-icon><span>Alarms</span></template><!-- 使用路由名称进行跳转 --><router-link :to="{ name: 'Alarms' }"></router-link></el-menu-item><el-menu-item index="Statistics"><template #title><el-icon><DataAnalysis /></el-icon><span>Statistics</span></template><!-- 使用路由名称进行跳转 --><router-link :to="{ name: 'Statistics' }"></router-link></el-menu-item></el-menu></el-aside><el-main><router-view></router-view></el-main></el-container><el-footer><p>Application Footer</p></el-footer></div>
</template><script>
import { HomeFilled, Setting, Bell, DataAnalysis } from '@element-plus/icons-vue';
import { useUserStore } from '@store';
import { useRouter } from 'vue-router';
import { ref, onMounted, watch } from 'vue';export default {name: "Layout",components: {HomeFilled,Setting,Bell,DataAnalysis},setup() {const userStore = useUserStore();const router = useRouter();const userInfo = userStore.userInfo;const isMobile = ref(window.innerWidth < 768);const logout = () => {userStore.logout();router.push({ name: 'Login' });};const handleResize = () => {isMobile.value = window.innerWidth < 768;};onMounted(() => {window.addEventListener('resize', handleResize);});return {userInfo,logout,isMobile};}
};
</script><style scoped>
el-header {background-color: #333;color: white;text-align: center;line-height: 60px;
}el-aside {background-color: #f4f4f4;
}el-main {background-color: #e9eef3;
}el-footer {background-color: #333;color: white;text-align: center;line-height: 60px;
}
</style>

4. 优化表格布局

对于表格组件（如 el-table），可以根据屏幕尺寸调整列的显示。

修改 `src/views/device/DeviceListView.vue`

<template><div><h1>Device List</h1><!-- 添加添加按钮 --><el-button type="primary" @click="goToAddDevice">Add Device</el-button><el-table :data="devices" stripe><el-table-column prop="id" label="ID" :show-overflow-tooltip="true"></el-table-column><el-table-column prop="name" label="Name" :show-overflow-tooltip="true"></el-table-column><el-table-column label="Actions" v-if="!isMobile"><template #default="scope"><el-button type="primary" @click="goToDeviceDetail(scope.row.id)">View Details</el-button><el-button type="warning" @click="goToEditDevice(scope.row.id)">Edit</el-button><el-button type="danger" @click="deleteDevice(scope.row.id)">Delete</el-button></template></el-table-column><el-table-column label="Actions" v-if="isMobile"><template #default="scope"><el-button type="primary" @click="goToDeviceDetail(scope.row.id)">Details</el-button></template></el-table-column></el-table><!-- 显示错误信息 --><div v-if="errorMessage">{{ errorMessage }}</div></div>
</template><script>
import { getDevices, deleteDevice } from '@/services/deviceService';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { ref, onMounted, watch } from 'vue';export default {name: "DeviceListView",data() {return {devices: [],errorMessage: ''}},setup() {const isMobile = ref(window.innerWidth < 768);const handleResize = () => {isMobile.value = window.innerWidth < 768;};onMounted(() => {window.addEventListener('resize', handleResize);});return {isMobile};},async created() {console.log('DeviceListView created'); // 添加日志try {const response = await getDevices();// 根据实际响应结构调整代码if (response && Array.isArray(response)) {this.devices = response;} else if (response && response.results) {this.devices = response.results;} else {this.devices = [];this.errorMessage = 'Unexpected response structure when fetching devices.';console.error(this.errorMessage);}} catch (error) {// 记录详细的错误信息this.errorMessage = `Error fetching devices: ${error.message}`;console.error(this.errorMessage);}},methods: {goToDeviceDetail(id) {this.$router.push({ name: 'DeviceDetail', params: { id } });},goToEditDevice(id) {this.$router.push({ name: 'DeviceEdit', params: { id } });},async deleteDevice(id) {try {await deleteDevice(id);ElMessage.success('Device deleted successfully');// 重新获取设备列表const response = await getDevices();if (response && Array.isArray(response)) {this.devices = response;} else if (response && response.results) {this.devices = response.results;} else {this.devices = [];this.errorMessage = 'Unexpected response structure when fetching devices.';console.error(this.errorMessage);}} catch (error) {ElMessage.error('Error deleting device');console.error('Error deleting device:', error);}},// 跳转到添加设备页面goToAddDevice() {this.$router.push({ name: 'DeviceAdd' });}}
}
</script><style scoped>
h1 {color: #333;
}
</style>

通过以上步骤，你可以让整个前端项目实现响应式布局，在不同的屏幕尺寸下都能有良好的显示效果。

前端项目采用响式布局

要让整个前端项目采用响应式布局，可以从多个方面进行优化，以下是一些具体的建议和实现方法： 1. 使用 ElementPlus 的响应式特性 ElementPlus 组件库本身提供了一些响应式的能力，例如 el-col 组件可以用于创建响应式的网格布局。…...

编程日记 2025/7/16 22:19:47

【Unity】DOTween的常用函数解释

DOTween插件常用函数解释 1.DOTween.To（通用变化动画） 解释：将某一个值在一定的时间内变化到另一个值（通用的函数），可用于大部分的动画变化使用示例： using UnityEngine; using DG.Tweenin…...

编程日记 2025/7/16 21:55:45

飞桨paddle import fluid报错【已解决】

跟着飞桨的安装指南安装了paddle之后 pip install paddlepaddle有一个验证： import paddle.fluid as fluid fluid.install check.run check()报错情况如下，但是我在pip list中，确实看到了paddle安装上了我import paddle别的包&#xff0c…...

编程日记 2025/7/16 21:58:17

ELK简介和docker版安装

使用场景主要还是给开发人员“打捞日志”用的。 ELK 是由三个开源工具组成的套件（Elasticsearch、Logstash 和 Kibana），主要用于日志的收集、分析和可视化。以下是 ELK 常见的使用场景： 日志集中化管理收集来自多个服务器或服…...

编程日记 2025/7/16 22:04:08

DockerHub被封禁，怎么将镜像传到国内？一种简单合规的镜像同步到国内方案[最佳实践]

Docker将容器化技术普及，推动云计算向云原生的演进。Docker的核心创新技术之一是容器镜像，它是一种文件的打包方式，将应用程序运行的操作系统、库、运行环境等依赖全部打包一起。在其他任意环境，只要可以运行docker服务&#xff0…...

编程日记 2025/7/16 21:41:24

飞桨paddle ‘ParallelEnv‘ object has no attribute ‘_device_id‘【已解决】

书借上回，自从我反复重装paddle之后，我发现了，只要pip list中有库，但是代码报错，那就是飞桨没把代码更新完全，只能自己去改源代码我又遇到报错了： 根据报错信息，找到ParallelEnv报…...

编程日记 2025/7/16 22:05:15

网络安全面试题（一）

文章目录一、基础概念与模型‌1. 什么是通信协议？列举三种常见的网络通信模型？2. 解释OSI七层模型及各层功能3. TCP/IP四层模型与OSI模型的对应关系是什么？4. 五层协议体系结构与TCP/IP模型的区别?5. 什么是面向连接与非面向连接的服务&…...

编程日记 2025/7/16 12:17:55

问题背景给定一个长度为 n n n 的整数数组 n u m s nums nums 和一个二维数组 q u e r i e s queries queries，其中 q u e r i e s [ i ] [ l i , r i ] queries[i] [l_i, r_i] queries[i][li,ri]。对于每个查询 q u e r i e s [ i ] queries[i] quer…...

编程日记 2025/7/6 14:21:21

RK3588 ArmNN CPU/GPU ResNet50 FP32/FP16/INT8 推理测试

RK3588 ArmNN CPU/GPU ResNet50 FP32/FP16/INT8 推理测试 **背景与目标** 一.性能数据【INT8模型在CPU上推理的结果已经不对,暂未分析原因】二.操作步骤2.1 在x86-Linux上生成onnx模型,以及tflite量化模型(避免在RK3588上安装过多依赖)2.1.1 创建容器2.1.2 安装依赖2.1.3 下载推…...

编程日记 2025/7/16 21:42:29

力扣第5题：最长回文子串（动态规划）

小学生一枚，自学信奥中，没参加培训机构，所以命名不规范、代码不优美是在所难免的，欢迎指正。标签： 字符串、动态规划、中心扩散法语言： C 题目： 给你一个字符串s，找到s中最长的…...

编程日记 2025/7/16 1:42:44

HCIP实验五

一、实验拓扑图： 二、实验需求分析： 1. PreVal策略：要求确保R4通过R2到达192.168.10.0/24 ，需在R4上针对去往该网段路由配置PreVal策略，为经R2的路径赋予更高优先值，影响本地路由表选路。 2. AS Path策略…...

编程日记 2025/7/16 21:55:45

python Numpy-数组

目录 Numpy： 一、Ndarray 1 定义 2 数组的属性方法 2.1 数组的维度：np.ndarray.shape 2.2 元素的类型：np.ndarray.dtype 2.3 数组元素的个数：np.ndarray.size 2.4 转置 3 ndarray 所存储元素的数据类型 4 数组创建 4.1 a…...

编程日记 2025/7/16 16:28:06

数据库分库分表从理论到实战

1.分库分表基础理论 1.1 分库分表基本概念定义：分库分表是一种将单一数据库中的数据分散存储到多个数据库或表中的技术方案，其核心思想是通过"分而治之"的方式解决数据库性能瓶颈问题。分库：将表按业务或数据量拆分到不同数据库中…...

编程日记 2025/7/16 22:00:28

Java异常处理与File类终极指南

Java异常处理与File类终极指南目录异常体系全维度拆解异常处理十五种高阶模式自定义异常企业级实践File类深度探索与NIO进化论分布式系统异常处理架构性能调优与安全防护全网最全异常代码库一、异常体系全维度拆解 1.1 Java异常DNA解析 // 异常类的核心继承关系 public cla…...

编程日记 2025/7/16 21:55:45

pmap中的mode列，脏页，写时复制

写时复制（Copy-on-Write，简称 COW） 是一种计算机编程中的优化技术，主要用于内存或存储资源的管理。其核心思想是：只有在真正需要修改数据时，才会执行实际的复制操作，从而避免不必要的资源开销。…...

编程日记 2025/7/15 4:48:19

通过COM获取正在运行的Excel实例并关闭 c#实现

利用COM对象模型获取正在运行的Excel实例并关闭。示例代码如下： using Excel Microsoft.Office.Interop.Excel; using System.Runtime.InteropServices; try { Excel.Application excelApp (Excel.Application)Marshal.GetActiveObject("Excel.Applicatio…...

编程日记 2025/7/16 8:35:13

运行在华为云kubernetes应用接入APM服务

1 APM概述在云时代微服务架构下应用日益丰富，纷杂的应用异常问题接踵而来。应用运维面临巨大挑战： 分布式应用关系错综复杂，应用性能问题分析定位困难，应用运维面临如何保障应用正常、快速完成问题定位、迅速找到性能瓶颈的挑战…...

编程日记 2025/7/2 10:56:54

虚幻引擎5-Unreal Engine笔记之摄像头camera

虚幻引擎5-Unreal Engine笔记之摄像头camera code review! 目录第一部分：摄像头的基础概念 1.1 UE5 中摄像头的定义与作用1.2 UE5 中摄像头的类型与分类第二部分：摄像头的代码结构与分类 2.1 摄像头是类还是组件？2.2 组件的本质&#xff…...

编程日记 2025/7/2 17:59:29

mysql的基础命令

1.SQL的基本概念 SQL 是用于管理和操作关系型数据库的标准编程语言。是所有关系型数据库（如 MySQL、PostgreSQL、Oracle 等）的通用语言。 SQL语句分类 DDL: Data Defination Language 数据定义语言 CREATE，DROP，ALTER DML: Da…...

编程日记 2025/7/13 1:33:54

去中心化算力池：基于IPFS+智能合约的跨校GPU资源共享平台设计

点击 “AladdinEdu，同学们用得起的【H卡】算力平台”，H卡级别算力，按量计费，灵活弹性，顶级配置，学生专属优惠。一、问题背景：高校算力孤岛的困境现状痛点各高校GPU集群利用率差异显著&…...

编程日记 2025/7/15 5:14:42

数据库（二）：ORM技术

什么是 ORM？ ORM（Object-Relational Mapping） 是一种用于实现对象模型（面向对象）与关系模型（数据库）之间映射的技术，使程序员可以通过操作对象的方式访问数据库数据，而无…...

编程日记 2025/7/15 11:16:08

Oracle基础知识

目录 1.别名的使用 2.AND的优先级高于OR 3.where后面可以接别名，order by后面不可以 4.Oracle中SQL的执行顺序(重点) 5.dual万用表 6.是否区分大小写 7.Oracle常用数据类型 8.Oracle常用函数 (1)length字符、lengthb字节和cast强制类型转换 (2)数据类型转…...

编程日记 2025/7/9 1:16:26

使用 vite-plugin-dynamic-base 实现运行时动态设置上下文路径

我们一般会在编译之前设置上下文，那么如何在编译之后动态设置上下文的路径？ 本文使用的技术栈是 Go（Gin） Vue.js（Vite） 本文使用到的第三方包：https://github.com/chenxch/vite-plugin-dynam…...

编程日记 2025/7/16 6:40:06

spark-shuffle 类型及其对比

1. Hash Shuffle 原理：将数据按照分区键进行哈希计算，将相同哈希值的数据发送到同一个Reducer中。特点：实现简单，适用于数据分布均匀的场景。但在数据分布不均匀时，容易导致某些Reducer处理的数据量过大，产…...

编程日记 2025/7/10 14:46:36

力扣-快乐数

1.题目要求 2.题目链接 202. 快乐数 - 力扣（LeetCode） 3.题目分析首先,因为需要频繁地用到数字变为各个位上的平方的过程,我们可以将"对于一个正整数,每一次将该数替换为它每个位置的数字的平方和"这一操作抽象出来，定义成一个…...

编程日记 2025/7/16 5:34:36

每日算法刷题Day10 5.19:leetcode不定长滑动窗口求最长/最大4道题，结束定长滑动窗口,用时1h

不定长滑动窗口不定长滑动窗口主要分为三类：求最长子数组，求最短子数组，以及求子数组个数。注：滑动窗口相当于在维护一个队列。右指针的移动可以视作入队，左指针的移动可以视作出队。滑动窗口【基础算法精讲 03】…...

编程日记 2025/7/11 23:30:28

FreeSWITCH 纯内网配置

纯内网，且同一个网段，Fs 可简化配置，要点是: 1. 不需要事先配置 directory，任意号码都可以注册，且无挑战 2. 呼叫无挑战不需要考虑那么多安全问题配置如下： 1. 全局变量 <X-PRE-PROCESS cmd"…...

编程日记 2025/7/13 8:53:22

STL中list的模拟

这里写目录标题 list 的节点 —— ListNodelist 的 “导览员” —— ListIteratorlist 的核心 —— list 类构造函数迭代器相关操作容量相关操作结尾在 C 的 STL（标准模板库）中，list 是一个十分重要的容器，它就像一个灵活的弹簧…...

编程日记 2025/7/16 17:40:02

【iOS】类结构分析

前言之前我们已经探索得出对象的本质就是一个带有isa指针的结构体，这篇文章来分析一下类的结构以及类的底层原理。类的本质类的本质我们在main函数中写入以上代码，然后利用clang对其进行反编译，可以得到c文件可以看到底层使用Class接…...

编程日记 2025/7/8 8:07:34

Android 万能AI证件照 v1.3.2

在日常的生活和工作场景里，证件照的身影随处可见。找工作投简历时，它是展现你形象的 “第一张名片”；办理各类证件，缺了它可不行；参加各种考试报名，同样需要它。可以说，证件照虽小，却…...

编程日记 2025/7/16 10:21:34

【Java】封装在 Java 中是怎样实现的?

包关于包有两个关键字 package : 声明当前类属于哪个包和 import : 允许当前类使用其他类或接口时不使用全限定名 , 也就是导包 . IDEA 的普通项目文件包括 src : 包含源码和资源文件和 out : 包含编译产物字节码文件 . 在 IDEA 开发环境建包会在 src 源码目录中生成 , 可…...

编程日记 2025/7/15 19:36:05

牛客网 NC14736 双拆分数字串题解

牛客网 NC14736 双拆分数字串题解题目分析解题思路通过分析，我们可以发现： 当n≤3时，无法构造出双拆分数字串，因为数字位数太少对于n>3的情况，我们可以构造两种特殊形式： 当n为奇数时&#xff0c…...

编程日记 2025/7/15 17:14:13

超长文本注意力机制如何突破传统 O(n²) 瓶颈

介绍了当前在超长文本（可达百万级及以上 Token）生成与预测中，注意力机制如何突破传统 O(n) 瓶颈，并阐释多种高效注意力算法如何支持超长上下文处理能力。概览当前主流 Transformer 在处理长序列时，由于每个 Token…...

编程日记 2025/7/11 11:21:36

异丙肌苷市场：现状、挑战与未来展望

摘要本文聚焦异丙肌苷市场，深入分析了其市场规模与增长趋势、应用价值与市场驱动因素、面临的挑战以及竞争格局。异丙肌苷作为一种具有重要应用价值的改性核苷衍生物，在药物研发和治疗领域展现出潜力，但市场发展也面临诸多挑战。文章最后为…...

编程日记 2025/7/14 5:09:20

JAVA面向对象——对象和类的基本语法

JAVA面向对象——对象和类的基本语法一、面向对象编程基础 1. 程序中的数据存储方式基本类型：变量（如 int max 15;）。数据结构：数组（一维/二维）、对象（特殊数据结构，用于存储复…...

编程日记 2025/7/14 2:49:56

【windows】音视频处理工具-FFmpeg（合并/分离）

一、FFmpeg介绍 FFmpeg是一个‌开源的跨平台音视频处理框架。法国计算机程序员 Fabrice Bellard 于 2000 年创建。 “FF”（代表 “Fast Forward”，快进之意）与 “mpeg”（流行的视频压缩标准 MPEG，即运动图像专家组&am…...

编程日记 2025/7/11 5:26:42

Java并发编程：从基础到高级实战

在现代软件开发中，并发编程已成为不可或缺的核心技能。随着多核处理器的普及和分布式系统的发展，能否编写高效、线程安全的并发程序直接决定了应用程序的性能和可靠性。Java作为一门成熟的企业级编程语言，提供了丰富的并发编程工具和API&…...

编程日记 2025/7/16 13:11:26

在 Excel 中使用东方仙盟软件————仙盟创梦IDE

安装插件用仙盟创梦编写插件代码源码 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using ExcelDna.Integration;namespace 东方仙盟.仙盟创梦IDE_招标系统 {public static class 仙盟创梦_招标专…...

编程日记 2025/7/10 16:14:34

win7无线网络名称显示为编码，连接对应网络不方便【解决办法】

使用多个网络时可能需要切换到打印机的网络来打印东西，但是win7的编码问题导致不知道哪个网络是对应网络，可以使用批处理命令来自动连接道指定网络将这个代码用文本文件打开后粘贴，然后另存为ansi格式的bat文件代码中使用两种方式进行连接…...

编程日记 2025/7/14 1:44:16

.NET 10 - 尝试一下Minimal Api的Validation新特性

1.简单介绍 2025年11月微软将会发布.NET10，这是LTS(Long Term Support)版本。当前.NET10已经处于Preview4版本，微软对Runtime, Library, SDK, C#, Asp.NET Core, MAUI等都做了很多enhancement。近些年微软对Minimal Api一直在持续地更新。在.NET8中, Mi…...

编程日记 2025/7/15 7:42:36

C# Task 与 SynchronizationContext

示例代码 using System; using System.Collections.Concurrent; using System.Threading; using System.Threading.Tasks;namespace Test {internal class Program{static void Main(string[] args){_mainThreadSynchronizationContext new ThreadSynchronizationContext(&qu…...

编程日记 2025/7/15 11:40:47

1. 使用 ElementPlus 的响应式特性

2. 使用媒体查询

修改 src/style.css

3. 修改 src/components/Layout.vue

4. 优化表格布局

修改 src/views/device/DeviceListView.vue

相关文章：

修改 `src/style.css`

3. 修改 `src/components/Layout.vue`

修改 `src/views/device/DeviceListView.vue`