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

媒体查询使用

news 来源：原创 2025/5/25 10:17:20

一、引言

为了确保网页在不同设备上都能提供良好的用户体验，响应式设计变得至关重要。而媒体查询（Media Queries）就是前端开发中实现响应式设计的核心技术之一。

二、媒体查询的概念

媒体查询是 CSS3 引入的一项强大功能，它允许开发者根据设备的特性（如屏幕宽度、高度、设备类型、分辨率等）来应用不同的 CSS 样式。通过媒体查询，我们可以为不同的设备或设备状态提供定制化的样式，从而实现网页在各种设备上的自适应显示。

三、媒体查询的语法

基本语法

媒体查询的基本语法如下：

css

@media media-type and (media-feature) {/* CSS 规则 */
}

media-type：指定媒体类型，常见的媒体类型有：
all：适用于所有设备，是默认值。
screen：用于计算机屏幕、平板电脑、智能手机等屏幕设备。
print：用于打印预览模式及打印设备。
speech：用于屏幕阅读器等发声设备。

media-feature：指定媒体特性，常见的媒体特性有：
width 和 min-width、max-width：分别表示设备的宽度、最小宽度和最大宽度。
height 和 min-height、max-height：分别表示设备的高度、最小高度和最大高度。
orientation：表示设备的方向，值可以是 portrait（竖屏）或 landscape（横屏）。
resolution：表示设备的分辨率，如 300dpi（每英寸点数）。

示例

以下是一个简单的媒体查询示例，当屏幕宽度小于等于 600px 时，将段落文字颜色设置为红色：

css

@media screen and (max-width: 600px) {p {color: red;}
}

逻辑操作符

在媒体查询中，还可以使用逻辑操作符来组合多个媒体特性：

and：用于连接多个媒体特性，表示所有条件都必须满足。

css

@media screen and (min-width: 600px) and (max-width: 900px) {body {background-color: lightblue;}
}

,（逗号）：表示或的关系，只要满足其中一个条件即可。

css

@media screen and (max-width: 600px), print {h1 {font-size: 20px;}
}

not：用于否定一个媒体查询条件。

css

@media not screen and (min-width: 600px) {/* 当屏幕宽度小于 600px 时应用 */div {display: none;}
}

四、媒体查询的应用场景

响应式布局

媒体查询最常见的应用场景是实现响应式布局。通过根据不同的屏幕宽度应用不同的布局样式，可以使网页在各种设备上都能完美显示。例如，在大屏幕上使用多列布局，而在小屏幕上使用单列布局：

css

/* 大屏幕布局 */
@media screen and (min-width: 900px) {.column {float: left;width: 33.33%;}
}/* 小屏幕布局 */
@media screen and (max-width: 899px) {.column {width: 100%;}
}

图片自适应

在不同设备上，图片的显示效果也需要进行调整。可以使用媒体查询来根据屏幕分辨率加载不同尺寸的图片，以节省带宽并提高页面加载速度：

css

/* 小屏幕设备加载小尺寸图片 */
@media screen and (max-width: 600px) {img {content: url('small-image.jpg');}
}/* 大屏幕设备加载大尺寸图片 */
@media screen and (min-width: 601px) {img {content: url('large-image.jpg');}
}

文字排版调整

在小屏幕上，文字的大小和行间距可能需要进行调整，以提高可读性。可以使用媒体查询来根据屏幕宽度调整文字的样式：

css

/* 小屏幕设备文字样式 */
@media screen and (max-width: 600px) {body {font-size: 14px;line-height: 1.5;}
}/* 大屏幕设备文字样式 */
@media screen and (min-width: 601px) {body {font-size: 16px;line-height: 1.6;}
}

五、实际案例

以下是一个完整的响应式网页示例，使用媒体查询实现不同屏幕尺寸下的布局和样式调整：

HTML 代码

html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>响应式网页示例</title><link rel="stylesheet" href="styles.css">
</head><body><header><h1>我的网站</h1></header><nav><ul><li><a href="#">首页</a></li><li><a href="#">关于</a></li><li><a href="#">服务</a></li><li><a href="#">联系我们</a></li></ul></nav><main><section class="content"><h2>欢迎来到我的网站</h2><p>这是一个响应式网页示例，使用媒体查询实现不同屏幕尺寸下的布局和样式调整。</p></section><aside><h3>侧边栏</h3><p>这里是侧边栏内容。</p></aside></main><footer><p>版权所有 &copy; 2025</p></footer>
</body></html>

CSS 代码（styles.css）

css

/* 全局样式 */
body {font-family: Arial, sans-serif;margin: 0;padding: 0;
}header {background-color: #333;color: white;text-align: center;padding: 20px;
}nav ul {list-style-type: none;margin: 0;padding: 0;background-color: #444;overflow: hidden;
}nav ul li {float: left;
}nav ul li a {display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;
}nav ul li a:hover {background-color: #555;
}main {padding: 20px;
}section.content {float: left;width: 70%;
}aside {float: right;width: 25%;background-color: #f4f4f4;padding: 10px;
}footer {clear: both;background-color: #333;color: white;text-align: center;padding: 10px;
}/* 小屏幕设备样式 */
@media screen and (max-width: 768px) {nav ul li {float: none;}section.content,aside {float: none;width: 100%;}
}

代码解释

在大屏幕设备上，导航栏使用水平布局，内容区域和侧边栏使用左右浮动布局。
当屏幕宽度小于等于 768px 时，导航栏变为垂直布局，内容区域和侧边栏变为堆叠布局，以适应小屏幕设备。

六、总结

媒体查询是前端开发中实现响应式设计的重要工具，通过根据设备的特性应用不同的 CSS 样式，可以使网页在各种设备上都能提供良好的用户体验。在实际写代码时，对于新手来说总是容易忽略这个东西，在自己电脑上显示的很好的网页，在别人电脑上可能布局就变得混乱，因此要注意媒体查询的使用

媒体查询使用

一、引言为了确保网页在不同设备上都能提供良好的用户体验，响应式设计变得至关重要。而媒体查询（Media Queries）就是前端开发中实现响应式设计的核心技术之一。二、媒体查询的概念媒体查询是 CSS3 引入的一项强大功能，它允许开…...

编程日记 2025/5/25 10:17:20

deepseek对IBM MQ SSL 证书算法的建议与解答

在IBM MQ配置SSL TLS的命令中，如果参数SSLCIPH使用TLS_RSA_WITH_AES_128_CBC_SHA256，如下所示： DEFINE CHANNEL(QM1.TO.QM2) CHLTYPE(SDR) TRPTYPE(TCP) CONNAME(QM1.MACH.COM) XMITQ(QM2) SSLCIPH(TLS_RSA_WITH_AES_128_CBC_SHA256) DESCR(S…...

编程日记 2025/5/26 5:16:25

服务器文件同步工具有哪些？

服务器文件同步工具的选择取决于你的具体需求（如实时同步、单向/双向同步、跨平台支持、安全性等）。以下是几款主流的服务器文件同步工具推荐，适用于不同场景： 1. 实时同步工具（适合高频率、低延迟需求） rsync 特点：经典增量同步工具，支持本地/远程同步，高效节省带宽。…...

编程日记 2025/4/29 7:07:21

Numpy数组与矩阵——python学习

我前面提到过Numpy函数，但是不够全，在这里我顺便做一些补充。先说明一下我用的是Notebook。一、数组的创建与操作 1、把列表转换为数组 np.array([1,2,3,4,5]) 2、把元组转换为数组 np.array((1,2,3,4,5)) 3、把range对象转换为数组 np.array(rang…...

编程日记 2025/5/26 5:48:12

CasaOS上部署1Panel开源运维面板远程在线访问配置实操指南

文章目录前言1. 添加镜像源2. 部署1Panel3. 本地访问测试4. 安装内网穿透工具5. 配置公网地址6. 配置固定公网地址前言很多时候在尝试远程管理服务器时，常常会遇到各种各样的麻烦，尤其是缺乏公网IP或者路由器设置过于复杂时，更是让人感到…...

编程日记 2025/5/26 5:07:24

深入理解缓存淘汰策略：LRU 与 LFU 算法详解及 Java 实现

一、LRU (Least Recently Used - 最近最少使用) LRU 策略的核心思想是：当缓存空间不足时，优先淘汰最近最长时间未被访问的数据。它基于“时间局部性”原理，即最近被访问的数据，在未来被访问的概率也更高。 LeetCode 146. LRU 缓…...

编程日记 2025/5/26 5:13:40

小智项目架构分析

小智代码架构 .github 这就是github项目上拉下来的一些信息没什么好看的，这跟项目代码无关 .build 编译时生成的文件，没什么可看的，与项目代码无关 .main 主要的代码都在这里面了 .managed_components 这里是小智用到的一些第三方移植…...

编程日记 2025/5/26 5:25:11

基于 SSE 和分块传输的 Uniapp 微信小程序实现流式传输对话

最近的项目是做微信小程序的一个对话框，接入DeepSeek，实现实时对话一个功能。主要用到的技术点为： 1. Server-Sent Events (SSE) 技术： 在请求头中设置了 ‘X-DashScope-SSE’: ‘enable’，启用了SSE协议服务器以事…...

编程日记 2025/5/26 6:01:37

[OS] POSIX C库介绍

POSIX C 库可以理解为 Unix/Linux系统的"标准化工具包"，用一句话概括就是： 👉 它提供了一套跨Unix系统的统一编程接口，让开发者用同一份代码能在不同系统（如Linux、macOS）中运行。核心组成&…...

编程日记 2025/5/26 6:07:13

＜uniapp＞＜插件＞＜UTS＞在uniapp中，创建自己的插件并发布到uni插件市场

前言本专栏是基于uniapp实现手机端各种小功能的程序，并且基于各种通讯协议如http、websocekt等，实现手机端作为客户端（或者是手持机、PDA等），与服务端进行数据通讯的实例开发。发文平台 CSDN 环境配置系统&…...

编程日记 2025/5/26 5:12:08

深度学习前沿探秘：Transformer 模型与多领域应用

技术点目录注意力（Attention）机制详解自然语言处理（NLP）领域的Transformer模型详解计算视觉（CV）领域的Transformer模型详解时间序列建模与预测的大语言模型目标检测算法详解目标检测的大语言模型语义分割的…...

编程日记 2025/5/26 5:43:25

介绍下Nginx的作用与请求转发机制

引言最近笔者在业务中遇到了Nginx轮训策略使用不当导致后端服务的压力增加，从而导致容器CPU资源不足，响应超时的问题； 但由于对Nginx的了解仅限与作为反向代理使用，所以借用GPT工具整理了Nginx的作用以及请求转发机制&#xff…...

编程日记 2025/5/26 5:34:17

Sql刷题日志（day6）

一、笔试 1、insert ignore：在插入数据时忽略主键冲突或其他唯一性约束冲突。如果插入的记录会导致主键冲突（如 actor_id 已存在），该语句不会报错，而是直接忽略插入操作语法： INSERT IGNORE INTO tab…...

编程日记 2025/5/25 22:55:46

Ajax 提交表单与文件上传

目录一、Ajax 提交表单1.1 基本原理1.2 HTML 表单示例1.3 JavaScript 示例（使用 fetch API）二、Ajax 文件上传2.1 基本原理2.2 HTML 文件上传表单示例2.3 JavaScript 示例（使用 fetch API）三、后端处理示例（以 Node.js + Express 为例）3.1 安装依赖3.2 创建服务器文件四…...

编程日记 2025/4/29 7:05:05

【零基础入门】ASP.NET Core快速搭建第一个Web应用

一、为什么选择ASP.NET Core？ 跨平台支持：可在Windows/macOS/Linux系统运行高性能：比传统ASP.NET框架快10倍以上开源生态：活跃的开发者社区和丰富的NuGet包云原生支持：完美适配Docker和Kubernetes部署二、开发…...

编程日记 2025/4/29 7:04:04

盒子模型

1.1看透网页布局的本质 1.2盒子模型的组成部分 css盒子模型本质是一个盒子，封装周围的html元素，它包括边框外边距内边距和实际内容。 padding：盒子与内容间的距离margin：盒子与盒子间的距离 1.3border边框 1.border-width 边…...

编程日记 2025/5/26 5:55:40

厚铜PCB如何兼顾质量与成本？供应商设计规范执行的黄金平衡点

厚铜电路板供应商需要遵循一系列设计规范，以确保所提供的电路板符合行业标准和客户要求。以下是一些需要遵循的设计规范： 1. 电路板尺寸和形状：厚铜电路板供应商需要按照客户提供的规格和要求来设计电路板的尺寸和形状。一般来说，…...

编程日记 2025/5/26 5:37:19

Kafka 配置参数性能调优建议

文章目录 1、生产者调优batch.size（重要）linger.mscompression.typeacks（重要）buffer.memorymax.in.flight.requests.per.connection（重要）message.max.bytes（重要） 2、消费者调优fe…...

编程日记 2025/5/26 5:30:57

Java读Excel：解析阿里云easyExcel导入文件的行号

文章目录引言I 解析阿里云easyExcel导入文件的行号声明解析对象的基类判断Excel解析对象类型是否包含继承某个类 isAssignableFromJava 转换list类型并设置下标到元素对象属性II 封装excel 文件读取excel 文件读取用法文件导入上下文III 参数校验工具类校验参数是否合法 (jaka…...

编程日记 2025/5/24 14:44:06

Vuex持续保存数据页面刷新不丢失 vuex-persistedstate

vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，这是我们不愿意看到的。怎么解决呢，我们可以结合本地存储做到数据状态持久化，但是太麻烦每次都要操作，强烈建议使用插件利用vuex-persistedstate插件. 安装 npm …...

编程日记 2025/4/29 7:03:58

.NET8配置组件

一、组件的概念含义：用于从配置文件中读取配置的组件，叫做配置组件。简单来说，就是从xml、json、yaml、txt等文件中读取配置的组件。主要采用微软提供的 Microsoft.Extensions.Configuration 二、组件的使用 1、json配置读取 (1)、在Dunk.Common.Project.Configuratio…...

编程日记 2025/5/25 2:17:53

加密算法:ed25519和RSA

ed25519 和 RSA 是两种不同的非对称加密算法，常用于 SSH 密钥认证。以下是它们的对比和选择建议： 1. 算法对比特性ed25519RSA (4096-bit)安全性更高（基于椭圆曲线密码学 ECC）高（依赖大数分解难度）密钥长度固定 256 位（公钥/私钥更短）通常 2048/4096 位（公钥较大）性能…...

编程日记 2025/5/24 18:32:10

递归、搜索和回溯算法《递归》

在之前的优选算法当中我们已经学习了一些基本的算法，那么接下来我们就要来学习算法当中的一大重要章节——递归、搜索和回溯算法，其实也就是大家常常听到的dfs、bfs；其实本质就是递归，在学习搜索、回溯等算法的过程当中我们会先来…...

编程日记 2025/4/29 7:02:51

构建“云中”高并发：12306技术改造的系统性启示

作为曾参与12306余票查询系统高并发升级的技术从业者，笔者注意到公众对于12306底层技术常存在认知盲区。为破解这一迷思，特此分享十年前的架构解密文献（该技术之前名叫 gemfire 现已晋升为Apache顶级项目Geode，代码库详见&#xf…...

编程日记 2025/5/26 5:15:02

升级xcode15 报错Error (Xcode): Cycle inside Runner

升级xcode15后报错 Could not build the precompiled application for the device. Error (Xcode): Cycle inside Runner; building could produce unreliable results. This usually can be resolved by moving the shell script phase Thin Binary so that it runs before th…...

编程日记 2025/5/24 16:02:21