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

CSS3学习教程，从入门到精通，CSS3 媒体查询实现响应式布局语法指南（21）

news 来源：原创 2025/8/24 3:44:15

CSS3 媒体查询实现响应式布局语法指南

一、媒体查询核心语法

1. 基础语法结构

@media 媒体类型 and (媒体特性) {/* 匹配条件时应用的CSS规则 */
}

2. 媒体类型（可省略）

类型值	说明
`all`	所有设备（默认值）
`screen`	屏幕设备
`print`	打印机设备
`speech`	屏幕阅读器

3. 常用媒体特性

特性名称	说明	单位/值示例
`width`	视口宽度	px, em, rem
`min-width`	视口最小宽度	600px
`max-width`	视口最大宽度	1024px
`orientation`	设备方向	portrait/landscape
`aspect-ratio`	视口宽高比	16/9
`resolution`	设备分辨率	300dpi
`hover`	主输入方式是否支持悬停	hover/none

4. 逻辑操作符

/* AND逻辑（同时满足） */
@media screen and (min-width: 768px) and (max-width: 1024px) {}/* OR逻辑（逗号分隔） */
@media (max-width: 600px), (orientation: portrait) {}/* NOT逻辑 */
@media not screen and (color) {}

5. 断点设置参考

设备类型	典型断点范围
手机（竖屏）	< 576px
手机（横屏）	576px - 767px
平板	768px - 991px
桌面	992px - 1199px
大屏桌面	≥ 1200px

二、完整案例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>响应式布局案例</title><style>/* 基础样式 - 移动优先 */* {box-sizing: border-box;margin: 0;padding: 0;}.container {padding: 15px;}/* 导航样式 */.nav {background: #333;padding: 1rem;}.nav-list {list-style: none;display: flex;flex-direction: column; /* 移动端垂直排列 */gap: 10px;}.nav-item {color: white;padding: 0.5rem;text-align: center;background: #666;}/* 主内容区 */.main-content {margin: 20px 0;padding: 15px;background: #f0f0f0;}/* 侧边栏 */.sidebar {padding: 15px;background: #e0e0e0;}/* 平板设备（≥768px） */@media screen and (min-width: 768px) {.nav-list {flex-direction: row; /* 水平排列导航 */justify-content: space-around;}.content-wrapper {display: flex;gap: 20px;}.main-content {flex: 3; /* 主内容占3份 */}.sidebar {flex: 1; /* 侧边栏占1份 */}}/* 桌面设备（≥992px） */@media screen and (min-width: 992px) {.container {max-width: 1200px;margin: 0 auto;}.nav-list {justify-content: flex-start; /* 左对齐导航项 */gap: 30px;}.nav-item {padding: 1rem 2rem;}}/* 大屏幕设备（≥1200px） */@media screen and (min-width: 1200px) {.main-content {font-size: 1.1rem;}.sidebar {padding: 30px;}}/* 打印样式 */@media print {.nav, .sidebar {display: none;}.main-content {background: white;color: black;}}</style>
</head>
<body><nav class="nav"><ul class="nav-list"><li class="nav-item">首页</li><li class="nav-item">产品</li><li class="nav-item">服务</li><li class="nav-item">关于</li></ul></nav><div class="container"><div class="content-wrapper"><main class="main-content"><h2>欢迎访问</h2><p>这是一个响应式布局的演示页面...</p></main><aside class="sidebar"><h3>最新消息</h3><p>响应式设计专题更新...</p></aside></div></div>
</body>
</html>

三、代码注释说明

移动优先策略

基础样式针对小屏幕设备编写
使用flex-direction: column实现垂直布局

平板适配（768px+）

将导航项改为水平排列
创建flex容器实现内容区与侧边栏的并排布局
使用flex比例分配空间（3:1）

桌面适配（992px+）

添加最大宽度限制并居中容器
调整导航项的间距和对齐方式
增大导航项的点击区域

大屏优化（1200px+）

增大正文字号提升可读性
增加侧边栏内边距

打印样式优化

隐藏非必要元素（导航、侧边栏）
调整背景色保证打印效果

四、注意事项

视口设置

<meta name="viewport" content="width=device-width, initial-scale=1.0">

必须包含此meta标签才能确保媒体查询在移动端生效

单位选择建议

优先使用相对单位（rem/em/%）
需要精确控制时使用px

断点设置技巧

根据内容变化设置断点，而非特定设备尺寸
使用Chrome开发者工具设备模式进行测试

性能优化

避免过多的媒体查询分段
将公共样式提取到基础规则中

现代布局结合

配合flexbox/grid布局使用效果更佳
结合CSS自定义属性实现动态样式调整

建议通过实际调整浏览器窗口大小，观察不同断点下的布局变化，加深对媒体查询工作机制的理解。

以下是开发中常用的CSS3媒体查询实际案例，结合不同场景和布局需求，提供具体代码实现及说明：

一、多列布局响应式调整

场景：根据屏幕宽度动态调整列数和布局样式

<style>
.container { display: flex; flex-wrap: wrap; }/* 默认四列布局（≥1200px）*/
.box { width: 25%; padding: 15px;border: 2px solid green;
}/* 平板：三列布局（768-1199px） */
@media (max-width: 1199px) {.box { width: 33.33%; border-color: blue;}
}/* 手机横屏：两列布局（480-767px） */
@media (max-width: 767px) {.box { width: 50%; padding: 10px;}
}/* 手机竖屏：单列布局（<480px） */
@media (max-width: 479px) {.box { width: 100%; border-color: red;}
}
</style>

特点：结合Flex布局实现动态列数变化，通过边框颜色直观显示当前布局模式。

二、内容动态显示优化

场景：根据设备宽度显示/隐藏特定内容

/* 桌面端显示完整地址 */
.contact-info::after {content: "（联系电话：400-800-1234）";
}/* 移动端隐藏电话号码 */
@media (max-width: 768px) {.contact-info::after {content: "";}.desktop-only { display: none; }.mobile-only { display: block; }
}

特点：通过伪元素动态调整显示内容，优化移动端信息展示。

三、响应式导航栏改造

场景：移动端折叠菜单与桌面端水平菜单切换

.nav {background: #333;padding: 1rem;
}/* 移动端垂直菜单 */
.nav-list {flex-direction: column;display: none;
}.menu-icon { display: block; }/* 桌面端水平菜单 */
@media (min-width: 992px) {.menu-icon { display: none; }.nav-list {display: flex;flex-direction: row;gap: 2rem;}
}

特点：通过媒体查询实现导航栏形态切换，配合JavaScript实现移动端菜单交互。

四、打印样式优化

场景：优化页面打印效果

@media print {.ad-banner, .side-menu {display: none;}body {font-size: 12pt;line-height: 1.5;color: #000;background: none;}a::after {content: " (" attr(href) ")";}
}

特点：隐藏非必要元素、调整文字样式、自动显示链接地址。

五、高清屏幕适配

场景：为Retina屏幕提供高清图片

.logo {background-image: url(logo.png);
}@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { .logo {background-image: url(logo@2x.png);background-size: contain;}
}

特点：通过分辨率检测适配高清显示屏。

六、方向检测布局

场景：根据设备方向调整布局

/* 竖屏布局 */
@media (orientation: portrait) {.gallery {grid-template-columns: 1fr;}
}/* 横屏布局 */
@media (orientation: landscape) {.gallery {grid-template-columns: repeat(3, 1fr);}
}

特点：利用设备方向特性优化内容展示方式。

最佳实践建议：

采用移动优先策略，先编写基础样式再添加媒体查询扩展
使用相对单位（rem/%）而非固定像素值
结合CSS Grid/Flexbox实现复杂响应式布局
通过Chrome DevTools设备模式测试多断点效果
对IE等老旧浏览器使用Respond.js兼容方案

CSS3学习教程，从入门到精通，CSS3 媒体查询实现响应式布局语法指南（21）

CSS3 媒体查询实现响应式布局语法指南一、媒体查询核心语法 1. 基础语法结构 media 媒体类型 and (媒体特性) {/* 匹配条件时应用的CSS规则 */ }2. 媒体类型（可省略） 类型值说明all所有设备（默认值）screen屏幕设备print打印机…...

编程日记 2025/8/24 3:44:15

C#中,什么是委托，什么是事件及它们之间的关系

1. 委托（Delegate） 定义与作用 ‌委托‌是类型安全的函数指针，用于封装方法，支持多播（链式调用）。‌核心能力‌：将方法作为参数传递或异步回调。使用场景回调机制（如异步操作完…...

编程日记 2025/8/24 14:15:27

【LeetCode 热题100】347：前 K 个高频元素（详细解析）（Go语言版）

🚀 力扣热题 347：前 K 个高频元素（详细解析） 📌 题目描述力扣 347. 前 K 个高频元素给你一个整数数组 nums 和一个整数 k，请你返回其中出现频率前 k 高的元素。你可以按任意顺序返回答案。 &#x1f…...

编程日记 2025/8/22 12:35:00

②EtherCAT/Ethernet/IP/Profinet/ModbusTCP协议互转工业串口网关

型号协议转换通信网关 EtherCAT 转 Modbus TCP 配置说明网线连接电脑到模块上的 WEB 网页设置网口，电脑所连网口的网段设置成 192.168.1.X（X 是除 8 外的任一数值）后，打开浏览器，地址栏输入 192.168.1.8 &#xff…...

编程日记 2025/8/23 19:09:39

微服务集成测试 -华为OD机试真题（A卷、Python）

题目描述现在有n个容器服务，服务的启动可能有一定的依赖性（有些服务启动没有依赖），其次，服务自身启动加载会消耗一些时间。给你一个n n 的二维矩阵useTime，其中useTime[i][i]10表示服务i自身启动加载需…...

编程日记 2025/8/24 12:30:01

k8s常用总结

1. Kubernetes 架构概览主节点（Master）： 负责集群管理，包括 API Server、Controller Manager、Scheduler 和 etcd 存储。工作节点（Node）： 运行 Pod 和容器，包含 kubelet、kube-pr…...

编程日记 2025/8/21 20:57:28

【算法】并查集基础讲解

一、定义一种树型的数据结构，用于处理一些不相交集合的合并及查询问题。思想是用一个数组表示了整片森林（parent），树的根节点唯一标识了一个集合，只要找到了某个元素的的树根，就能确定它在哪个集合里。 …...

编程日记 2025/8/21 20:05:33

探索PHP的未来发展与应用趋势

PHP，作为Web开发领域的常青树，自1995年诞生以来，始终在动态网页开发中占据重要席位。随着技术的不断演进，PHP也在持续更新，以适应现代开发需求。本文将深入探讨PHP的最新发展动态及其在2025年的应用趋势。 PHP 8&…...

编程日记 2025/8/24 10:22:08

C#调用ACCESS数据库，解决“Microsoft.ACE.OLEDB.12.0”未注册问题

C#调用ACCESS数据库，解决“Microsoft.ACE.OLEDB.12.0”未注册问题解决方法： 1.将C#采用的平台从AnyCpu改成X64 2.将官网下载的“Microsoft Access 2010 数据库引擎可再发行程序包AccessDatabaseEngine_X64”文件解压 3.安装解压后的文件点击下载安…...

编程日记 2025/8/22 17:43:18

ubuntu22.04.5安装docker,解决安装出现的错误，解决Docker hello-world没打印出来

文章目录前言一安装失败解决1结合具体报错分析2 首先怀疑是VPN的问题3 直接百度报错信息4最终解决问题二验证Docker hello-world没打印出来总结前言先说一下前面的情况，使用的是公司的工作站，登录公司一个帐号使用的公司网络，使用网上…...

编程日记 2025/8/23 8:02:29

HMTL+JS+CSS实现贪吃蛇游戏，包含有一般模式，困难模式，还有无敌模式

HMTLJSCSS实现贪吃蛇游戏，包含有一般模式，困难模式，还有无敌模式（可以穿墙死不了，从左边进去可以从右边出来），显示当前分数和最高分，吃到的球颜色可以叠加到蛇身体上为了适配手机端…...

编程日记 2025/8/24 11:29:34

vue将页面导出成word

方法一：使用 html-docx-js html-docx-js 是一个轻量级的库，可以将 HTML 转换为 Word 文档。安装依赖首先安装 html-docx-js： Bash深色版本 npm install html-docx-js --save创建导出逻辑在 Vue 组件中实现导出功能的代码如下&#xff1…...

编程日记 2025/8/22 9:39:07

Spring MVC 页面跳转方案与区别

SpringMVC 的页面跳转方案主要分为 ‌转发（Forward）‌ 和 ‌重定向（Redirect）‌ 两类，具体实现方式和区别如下： 一、页面跳转方案 1. ‌转发（Forward）‌ 默认方式‌：直…...

编程日记 2025/8/23 18:43:20

Open GL ES -＞纹理贴图，顶点坐标和纹理坐标组合到同一个顶点缓冲对象中进行解析

XML文件 <?xml version"1.0" encoding"utf-8"?> <com.example.myapplication.MyGLSurfaceView2 xmlns:android"http://schemas.android.com/apk/res/android"android:id"id/glSurfaceView"android:layout_width"matc…...

编程日记 2025/8/22 20:02:00

题解：AT_arc050_c [ARC050C] LCM 111

一道比较简单的题。（我绝对不会告诉你这题我改了很久） 题目意思很简单，我就不过多解释了，我们直接进入正题。题目要我们求 a a a 个 1 1 1 组成的数与 b b b 个 1 1 1 组成的数的最小公倍数除以 m m m 后的余数。先不考虑…...

编程日记 2025/8/22 18:54:13

【408--考研复习笔记】计算机网络----知识点速览

目录一、计算机网络体系结构 1.计算机网络的定义与功能： 2.网络体系结构相关概念： 3.OSI 七层模型与 TCP/IP 模型： 4.通信方式与交换技术： 电路交换报文交换分组交换 5.端到端通信和点到点通信： 6.计算机…...

编程日记 2025/8/24 7:33:46

ISIS报文

IS-IS 报文目录 IS-IS 报文一、报文类型与功能二、报文结构解析三、核心功能特性四、典型应用场景五、抓包数据分析六、总结 IS-IS（中间系统到中间系统）协议报文是用于链路状态路由协议中网络设备间交换路由信息的关键载体，其设…...

编程日记 2025/8/24 10:53:48

FPGA——分秒计数器

文章目录一、实验任务二、系统模块三、工程源码四、管脚信息五、运行结果参考资料总结一、实验任务在DE2-115板子上用 Verilog编程实现一个分秒计数器，并具备按键暂停、按键消抖功能。二、系统模块分频模块高频时钟（如50MHz）分频得到…...

编程日记 2025/8/23 22:23:47

【Java】JVM

一、JVM体系结构 1、虚拟机概述虚拟机（Virtual Machine）：一台虚拟的计算机，指一种特殊的软件，他可以在计算机平台和终端用户之间创建一种环境，而终端用户则是基于这个软件所创建的环境来操作软件。虚拟机…...

编程日记 2025/8/23 8:54:15

vue中使用geoscene无法出现弹窗

项目场景： 平日对地图加载使用不复杂的情况下，我通常采用leaflet去加载地图做一些简单的操作。但是最近需要用到arcgis发布的地图服务加载三维场景，于是又用回了geoscene（arcgis国产化）。这下暴露出很多的问题&#x…...

编程日记 2025/8/24 6:58:58

【Go】数组

数组Array 重点： 数组是值类型注意点: 1. 数组：是同一种数据类型的固定长度的序列。2. 数组定义：var a [len]int，比如：var a [5]int，数组长度必须是常量，且是类型的组成部分。一旦定义&…...

编程日记 2025/8/21 9:17:23

【运维】Centos硬盘满导致开机时处于加载状态无法开机解决办法

Centos硬盘存储过满导致无法加载一、准备1.现象2.根因分析3.制定救援方案问题1：无法进入系统确定分析结论问题2：磁盘数据过多 4.后处理一、准备 1.现象 Centos虚拟机界面卡顿，随后进行了重启操作，发现重新启动界面一直卡在加…...

编程日记 2025/8/22 21:43:54

JVM——模型分析、回收机制

方法区：存储已被虚拟机加载的类元数据信息(元空间) 堆：存放对象实例，几乎所有的对象实例都在这里分配内存虚拟机栈：虚拟机栈描述的是|ava方法执行的内存模型:每个方法被执行的时候都会同时创建一个栈帧(Stack Frame)用于存储局…...

编程日记 2025/8/23 16:52:42

kafka 4.x docker启动kafka4.0.0 docker-compose启动最新版kafka 如何使用docker容器启动最新版kafka

1. 镜像选择标签： https://hub.docker.com/r/bitnami/kafka/tags 2. 命令： docker pull bitnami/kafka:4.0.0 3. docker-compose.yml 启动kafka4.0.0： version: 3services:kafka:image: bitnami/kafka:4.0.0container_name: kafkaports:- &…...

编程日记 2025/8/23 16:41:06

BUUCTF-web刷题篇(6)

15.PHP 知识点： ①__wakeup()//将在反序列化之后立即调用（当反序列化时变量个数与实际不符是会绕过）我们可以通过一个cve来绕过:CVE-2016-7124。将Object中表示数量的字段改成比实际字段大的值即可绕过wakeup函数。条件：PHP5<…...

编程日记 2025/8/21 22:31:32

MySQL篇（一）：慢查询定位及索引、B树相关知识详解

MySQL篇（一）：慢查询定位及索引、B树相关知识详解 MySQL篇（一）：慢查询定位及索引、B树相关知识详解一、MySQL中慢查询的定位（一）慢查询日志的开启（二）慢查询日…...

编程日记 2025/8/24 16:36:29

QT之QML（简单示例）

需求一：点击按钮弹出菜单，并且自定义菜单弹出位置。 mouse.x 和 mouse.y 获取的是相对于 MouseArea（在这个例子中是 Button）左上角的局部坐标。如果你想要在鼠标点击位置显示 Menu，你需要将这个局部坐标转换为相对于应…...

编程日记 2025/8/21 17:18:23

自动化释放linux服务器内存脚本

脚本说明使用Linux的Cron定时任务结合Shell脚本来实现自动化的内存释放。脚本用到sync系统命令 sync的作用：sync 是一个 Linux 系统命令，用于将文件系统缓存中的数据强制写入磁盘。在你执行reboot、poweroff、shutdown命令时，系统会默认执…...

编程日记 2025/8/24 15:54:42

Linux中的权限管理

一、权限的概念在 Linux 系统的架构里，权限是构建安全堡垒的基石，精准界定了不同用户对文件与目录的操作边界，对系统安全的维护以及数据完整性的保障起着决定性作用。 1.权限的三种基础类别： 权限对文件的影响对目录的影响读(r…...

编程日记 2025/8/23 14:07:04

Java对象与JSON字符串的互转

最近，工作中会涉及到Java对象与JSON字符串相互转换，虽然说并不难，但打算还是梳理一番，主要内容有： JSON 字符串转普通对象普通对象转 JSON 字符串 JSON 字符串数组转 List 集合对象 List 集合对象转 JSON 字符串…...

编程日记 2025/8/23 1:52:41

[笔记.AI]向量化

（借助 DeepSeek-V3 辅助生成） 向量化的定义向量化（Vectorization） 是将文本、图像、音频等非结构化数据转换为高维数值向量（即一组数字）的过程。这些向量能够捕捉数据的语义、特征或上下文信息&#x…...

编程日记 2025/8/24 16:33:03

NSSCTF(MISC)—[justCTF 2020]pdf

相应的做题地址：https://www.nssctf.cn/problem/920 binwalk分离解压文件2AE59A.zip mutool 得到一张图片 B5F31内容 B5FFD内容转换成图片 justCTF{BytesAreNotRealWakeUpSheeple}...

编程日记 2025/8/23 2:32:47

Angular的理解

Angular 是一个由 Google 维护的全功能前端框架，适合构建复杂的企业级应用。它采用 TypeScript 作为首选语言，提供了一套完整的解决方案，包括数据绑定、依赖注入、路由、表单处理等。 1. Angular 的核心概念 1.1 组件化架构 Angular 应用由…...

编程日记 2025/8/24 13:56:37

广告推荐算法：COSMO算法与A9算法的对比

COSMO算法与A9算法的概念解析 1. A9算法定义与背景： A9算法是亚马逊早期为电商平台研发的核心搜索算法，主要用于优化商品搜索结果的排序和推荐，其核心逻辑围绕产品属性与关键词匹配展开。自2003年推出以来，A9通过分析商品标题…...

编程日记 2025/8/23 21:12:25

10. 七大排序(含四种版本快排及优化) ******

排序算法时间复杂度(平均)时间复杂度(最坏)时间复杂度(最好)空间复杂度稳定性主要使用场景直接插入排序O(n)O(n)O(n)O(1)稳定小规模数据或基本有序数据希尔排序O(n^1.3)O(n)O(n log n)O(1)不稳定中等规模数据，对稳定性无要求选择排序O(n)O(n)O(n)O(1)不稳定小规模数…...

编程日记 2025/8/24 9:47:41

以下是C/C++后台开发常见的高概率面试题

一、语言基础多态的实现通过虚函数表（vtable）实现动态绑定，运行时根据对象类型调用对应的函数。虚函数通过virtual关键字声明，子类可重写基类虚函数112。指针与引用的区别指针是变量，存储地址，支持多…...

编程日记 2025/8/22 12:04:34

CentOS-查询实时报错日志-查询前1天业务报错gz压缩日志

最新版本更新 https://code.jiangjiesheng.cn/article/364?from=csdn 推荐《高并发 & 微服务 & 性能调优实战案例100讲源码下载》 1. 查询实时报错日志物理路径（带*的放在靠后，或者不用*） cd /home/logs/java-gz-log-dir && tail -2000f java-gz-l…...

编程日记 2025/8/22 14:27:17

破界·共生：生成式人工智能（GAI）认证重构普通人的AI进化图谱

在当今这个科技日新月异的时代，人工智能（AI）正以惊人的速度改变着我们的世界。从智能家居到自动驾驶，从医疗诊断到金融分析，AI的应用已经渗透到社会生活的方方面面。面对如此迅猛的发展态势，我们不禁要问：人工智能的未来将走向何方？普通人又该如何把握这一历史机遇，学…...

编程日记 2025/8/24 17:39:30

HTTP代理：网页加速的隐形引擎

目录引言：网页加载速度为何至关重要？ 一、HTTP代理的核心加速原理二、四大加速黑科技详解三、实战场景性能对比四、代理加速的隐藏代价五、未来发展趋势结语：智能代理的选型指南引言：网页加载速度为何至关重要&#…...

编程日记 2025/8/23 13:02:15

Unity 常见报错定位和查找方法

1.控制台直接看报错信息 2.打log 例子： for(int i 0;i < 8;i) {Debug.Log(i);//这是打的log,看看到底i是几的时候出问题gameObject.name strs[i];} 3.断点调试 （1）在你想打断点的行，左边空白处点击可以打断点&#xff…...

编程日记 2025/8/24 1:53:50

人工智能之数学基础:初等反射阵

本文重点在线性代数中，初等反射阵（Householder矩阵）作为一类特殊的正交矩阵，在矩阵变换、特征值计算及几何变换等领域具有广泛应用。其简洁的构造方式和丰富的数学性质，使其成为数值分析和几何处理中的重要工具。什么是初等反射阵（豪斯霍尔德变换） I为单位矩阵，wwT…...

编程日记 2025/8/23 14:42:34

《Linux运维总结：基于银河麒麟V10操作系统+ARM64架构CPU二进制部署单机ACL版consul v1.18.1》

总结：整理不易，如果对你有帮助，可否点赞关注一下？更多详细内容请参考：《Linux运维篇：Linux系统运维指南》一、简介 1、什么是consul Consul是HashiCorp公司推出的开源工具，用于实现分布式系统的服务发现与配置。 Consul是分布式的、高可用的、可横向扩展的。架构图…...

编程日记 2025/8/24 1:40:47

web网站页面测试点---添加功能测试

添加一、创建新的申请时，关闭网络查看数据是否存在，并提示网络错位相关提示语二、在文本框内输入数据 1.在文本框内输入空格，查看文本内容前后是否存在空格 2.在文本框内输入最大长度，查看能否正确提交 3.在文本框内输入最大长…...

编程日记 2025/8/22 5:14:05

实操自动生成接口自动化测试用例

这期抽出来的问题是关于如何使用Eolinker自动生成接口自动化测试用例，也就是将API文档变更同步到测试用例，下面是流程的示例解析。导入并关联API文档和自动化测试用例首先是登陆Eolinker，可以直接在线使用。进入流程测试用例详情页&am…...

编程日记 2025/8/24 5:21:37

【华为OD技术面试真题 - 技术面】- Java面试题（17)

华为OD面试真题精选专栏：华为OD面试真题精选目录: 2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选虚拟机分区1. **虚拟磁盘分区**2. **虚拟机的内存分区**3. **CPU分配**4. **虚拟网络分区**5. **存储虚拟化和分区**6. **虚拟机分区管理**…...

编程日记 2025/8/23 22:50:52

mapState 函数的用法

mapState 是 Vuex 提供的一个辅助函数，其主要作用是将 Vuex 仓库中的状态映射到组件的计算属性中，这样在组件里就能像访问本地计算属性一样访问 Vuex 仓库中的状态。以下为你详细介绍 mapState 函数的不同用法。 1. 基本用法：对象形式当使…...

编程日记 2025/8/24 16:34:19

【学Rust写CAD】17 通用2D仿射变换矩阵结构体（matrix/generic.rs）

源代码 // matrix.rs use std::ops::{Add, Mul};use std::ops::{Add, Mul};/// 通用2D仿射变换矩阵（元素仅需Copy） #[derive(Clone, Copy, Debug, PartialEq)] pub struct Matrix<X, Y, Xx, Xy, Yx, Yy> {pub x: X, pub y: Y,pub xx: Xx, pub xy:…...

编程日记 2025/8/23 19:42:49