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

【CSS】CSS3媒体查询全攻略

媒体查询教程

媒体查询(Media Queries)是CSS3中引入的强大功能,允许内容根据设备特性(如屏幕尺寸、分辨率、方向等)进行自适应调整。以下是媒体查询的详细教程:

基本语法

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

常用媒体类型

  • all - 所有设备(默认)
  • screen - 电脑屏幕、平板、智能手机等
  • print - 打印机和打印预览
  • speech - 屏幕阅读器等发声设备

常用媒体特性

视口/屏幕特性

  • width - 视口宽度
  • height - 视口高度
  • min-width - 视口最小宽度
  • max-width - 视口最大宽度
  • orientation - 方向(portrait竖屏/landscape横屏)
  • aspect-ratio - 视口宽高比

显示质量特性

  • resolution - 设备分辨率
  • scan - 电视扫描方式
  • grid - 是否是网格设备(如终端)

常见断点示例

/* 超小设备 (手机, 600px及以下) */
@media only screen and (max-width: 600px) {...}/* 小设备 (平板, 600px以上) */
@media only screen and (min-width: 600px) {...}/* 中等设备 (平板横屏, 768px以上) */
@media only screen and (min-width: 768px) {...}/* 大设备 (笔记本/台式机, 992px以上) */
@media only screen and (min-width: 992px) {...}/* 超大设备 (大屏幕, 1200px以上) */
@media only screen and (min-width: 1200px) {...}

逻辑运算符

可以使用and,(相当于or)、notonly来组合媒体查询:

/* 横屏且最小宽度700px */
@media (orientation: landscape) and (min-width: 700px) {...}/* 竖屏或屏幕宽度小于500px */
@media (orientation: portrait), (max-width: 500px) {...}/* 仅对屏幕设备且不是旧浏览器 */
@media only screen and (min-width: 768px) {...}

实际应用示例

/* 默认样式 - 移动优先 */
.container {width: 100%;padding: 10px;
}/* 平板及以上 */
@media (min-width: 768px) {.container {width: 750px;padding: 15px;}
}/* 桌面及以上 */
@media (min-width: 992px) {.container {width: 970px;padding: 20px;}
}/* 大桌面 */
@media (min-width: 1200px) {.container {width: 1170px;}
}

在HTML中链接媒体查询

也可以在link标签中使用媒体查询:

<link rel="stylesheet" media="screen and (min-width: 900px)" href="desktop.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="mobile.css">

现代响应式设计建议

  1. 移动优先:先写移动端样式,再用媒体查询逐步增强
  2. 基于内容断点:根据内容布局需要设置断点,而非特定设备尺寸
  3. 使用相对单位:em/rem/%等相对单位比固定像素更灵活
  4. 测试多种设备:确保在各种设备上都能良好显示

相关文章:

【CSS】CSS3媒体查询全攻略

媒体查询教程 媒体查询(Media Queries)是CSS3中引入的强大功能&#xff0c;允许内容根据设备特性(如屏幕尺寸、分辨率、方向等)进行自适应调整。以下是媒体查询的详细教程&#xff1a; 基本语法 media mediatype and (media feature) {/* CSS规则 */ }常用媒体类型 all - 所…...

深入理解Spring的ResponseBodyAdvice接口

什么是ResponseBodyAdvice? ResponseBodyAdvice是Spring框架4.2版本引入的一个非常有用的接口&#xff0c;它允许我们在控制器方法执行后、响应体写入前对响应进行统一处理。这个接口为开发者提供了对返回数据进行统一拦截和修改的能力&#xff0c;是Spring MVC响应处理流程中…...

C++法则5: 在函数调用过程中,具有非引用类型的参数要进行拷贝初始化。

C法则5&#xff1a; 在函数调用过程中&#xff0c;具有非引用类型的参数要进行拷贝初始化。 在 C 中&#xff0c;法则5指的是&#xff1a;当函数参数是非引用类型&#xff08;即按值传递&#xff09;时&#xff0c;传递给函数的实参会进行拷贝初始化&#xff08;copy initializ…...

Python 使用 Requests 模块进行爬虫

目录 一、请求数据二、获取并解析数据四、保存数据1. 保存为 CSV 文件2. 保存为 Excel 文件打开网页图片并将其插入到 Excel 文件中 五、加密参数逆向分析1. 定位加密位置2. 断点调试分析3. 复制相关 js 加密代码&#xff0c;在本地进行调试&#xff08;难&#xff09;4. 获取 …...

day039-nginx配置补充

文章目录 0. 老男孩思想-如何提升能力&#xff1f;1. nginx登录认证功能1.1 创建密码文件1.2 修改子配置文件1.3 重启服务 2. nginx处理请求流程3. 配置默认站点4. location 命令5. 案例1-搭建大型直播购物网站5.1 配置本地hosts解析5.2 编写子配置文件5.3 创建相关目录/文件并…...

K8s入门指南:架构解析浓缩版与服务间调用实战演示

目录 前言一、k8s概念理解1、k8s整体架构&#xff08;1&#xff09; Master 主节点&#xff08;2&#xff09; Node 工作节点&#xff08;3&#xff09; Etcd 键值存储数据库 &#xff12;、Pod被视为最小的部署单元&#xff13;、k8s的五种控制器类型&#xff08;1&#xff09…...

如何用AI开发完整的小程序<10>—总结

通过之前9节的学习。 如何用Ai制作一款简单小程序的内容就已经都介绍完了。 总结起来就以下几点&#xff1a; 1、搭建开发制作环境 2、创建页面&#xff08;需要手动&#xff09; 3、在页面上制作UI效果&#xff08;让Ai搞&#xff0c;自己懂了后可以自己调&#xff09; 4…...

Javaweb - 3 CSS

CSS 层叠样式表&#xff08;Cascading Style Sheets&#xff09;&#xff0c;能够对网页中元素位置的排版进行像素级精确控制&#xff0c;支持几乎所有的字体字号样式&#xff0c;拥有对网页对象和模型样式编辑的能力。 简单来说&#xff0c;HTML 搭建一个毛坯房&#xff0c;C…...

【算法】【优选算法】优先级队列

目录 一、1046.最后一块石头的重量二、703. 数据流中的第 K 大元素三、692. 前 K 个⾼频单词四、295. 数据流的中位数 一、1046.最后一块石头的重量 题目链接&#xff1a;1046.最后一块石头的重量 题目描述&#xff1a; 题目解析&#xff1a; 题意就是让我们拿出提供的数组…...

PaddleOCR + Flask 构建 Web OCR 服务实战

1、前言 随着图像识别技术的发展,OCR(光学字符识别)已经成为很多应用场景中的基础能力。PaddleOCR 是百度开源的一个高性能 OCR 工具库,支持中英文、多语言、轻量级部署等特性。 而 Flask 是一个轻量级的 Python Web 框架,非常适合快速构建 RESTful API 或小型 Web 应用…...

openapi-generator-maven-plugin自动生成HTTP远程调用客户端

Java开发中调用http接口的时候&#xff0c;有很多可选的技术方案&#xff0c;比如&#xff1a;HttpURLConnection、RestTemplate、WebClient、Feign、Retrofit、Okhttp等&#xff0c;今天我们来看一个更优的技术方案OpenAPI Generator(http://openapi-generator.tech/) OpenAP…...

ms-swift 部分命令行参数说明

参考链接 命令行参数 — swift 3.6.0.dev0 文档 Qwen Chat num_train_epochs 训练的epoch数&#xff0c;默认为3 假设你有 1000 条训练样本&#xff0c;并且设置了&#xff1a; num_train_epochs 3 这意味着&#xff1a; 模型会完整地遍历这 1000 条数据 3 次。每一次…...

【学习笔记】深入理解Java虚拟机学习笔记——第10章 前端编译与优化

第10章 前端编译与优化 10.1 概述 1>前端编译器&#xff1a;Javac命令。 【.java文件->.class文件】 2>即时编译器&#xff1a;Hotspot.C1.C2 【.class文件->机器码】 3>提前编译器&#xff1a;JDK的Jaotc等【.java->机器码】 10.2 Javac 编译器 10.2.1 …...

删除node并且重装然后重装vue

参考第一篇文章 node.js卸载与安装超详细教程_node卸载重装-CSDN博客 第二篇文章安装vue Vue安装与配置教程&#xff08;非常详细&#xff09;_安装vue-CSDN博客...

Flink源码阅读环境准备全攻略:搭建高效探索的基石

想要深入探索Flink的底层原理&#xff0c;搭建一套完整且适配的源码阅读环境是必经之路。这不仅能让我们更清晰地剖析代码逻辑&#xff0c;还能在调试过程中精准定位关键环节。接下来&#xff0c;结合有道云笔记内容&#xff0c;从开发工具安装、源码获取导入到调试配置&#x…...

【破局痛点,赋能未来】领码 SPARK:铸就企业业务永续进化的智慧引擎—— 深度剖析持续演进之道,引领数字化新范式

摘要 在瞬息万变的数字时代&#xff0c;企业对业务连续性、敏捷创新及高效运营的需求日益迫切。领码 SPARK 融合平台&#xff0c;秉持“持续演进”这一核心理念&#xff0c;以 iPaaS 与 aPaaS 为双擎驱动&#xff0c;深度融合元数据驱动、智能端口调度、自动化灰度切换、AI 智…...

Flink SQL Connector Kafka 核心参数全解析与实战指南

Flink SQL Connector Kafka 是连接Flink SQL与Kafka的核心组件&#xff0c;通过将Kafka主题抽象为表结构&#xff0c;允许用户使用标准SQL语句完成数据读写操作。本文基于Apache Flink官方文档&#xff08;2.0版本&#xff09;&#xff0c;系统梳理从表定义、参数配置到实战调优…...

Linux 服务器运维:磁盘管理与网络配置

&#x1f935;‍♂️ 个人主页&#xff1a;布说在见 ✍&#x1f3fb;作者简介&#xff1a; &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f44d;&#x1f3fb; 收藏…...

PyTorch 入门学习笔记

目录 1 张量 1&#xff09;张量的初始化和属性 2&#xff09;张量操作 3&#xff09;使用 NumPy 进行桥接 2 torch.autograd 1&#xff09;背景 2&#xff09;在 PyTorch 中的使用 3&#xff09;Autograd 的微分机制 4&#xff09;计算图原理 3 神经网络 1&#xff…...

9大策略深度解析MySQL多表JOIN性能优化

一、多表JOIN的现实挑战 在实际开发中&#xff0c;MySQL多表JOIN场景主要源于两类场景&#xff1a; • 历史遗留系统&#xff1a;老代码中未严格遵循范式设计的SQL语句• 数据库迁移&#xff1a;从Oracle迁移至MySQL时保留的复杂关联查询 这类操作潜藏多重风险&#xff1a; …...

CSS 逐帧动画

CSS 逐帧动画实现指南 逐帧动画(frame-by-frame animation)是一种通过快速连续显示一系列静态图像来创造运动效果的技术。以下是使用CSS实现逐帧动画的几种方法。 1. 使用 steps() 计时函数 这是实现逐帧动画最常用的方法&#xff0c;通过animation-timing-function的steps(…...

UE5 游戏模板 —— ThirdPersonGame

UE5 游戏模板 —— ThirdPersonGame 前言一、初始化旋转控制参数1.参数一2.参数二3.参数三4.参数四 二、输入系统总结 前言 有了前面的铺垫&#xff0c;第三人称模板简直是手到擒来了&#xff0c;我们只需要注意一些初始化的变量是做什么的即可&#xff0c;因为UE的Character …...

java中关于异步转同步的一些解决方案的对比与思考。【spring mvc堵塞式】

文章目录 1、Spring MVC堵塞式编程中的技术方案a&#xff09; 最简单的方案&#xff0c;使用 DeferredResult 代码如下&#xff0c;代码解读&#xff1a;最终控制台输出如下。用户收到的结果 b) 上点难度&#xff0c;使用redis监听事件&#xff0c;根据事件的不同返回不同的数据…...

【数据结构与算法】数据结构核心概念系统梳理

第一章 绪论:基础概念体系 🚩算法:问题求解步骤的描述。 🚩非递归的算法效率更高。 1.1 逻辑结构 vs 存储结构 维度逻辑结构存储结构(物理结构)定义数据元素之间的逻辑关系数据结构在计算机中的实现方式分类线性/树形/图/集合顺序/链式/索引/散列独立性独立于存储结构…...

《HTTP权威指南》 第7章 缓存

带着问题学习&#xff1a; 缓存如何提高性能如何衡量缓存的有效性缓存置于何处作用最大HTTP如何保持缓存副本的新鲜度缓存如何与其他缓存及服务器通信 web缓存是可以自动保存常见文档副本的HTTP设备。 缓存优点 减少冗余的数据传输&#xff0c;节省网络费用缓解网络瓶颈问题&…...

【Zephyr 系列 28】MCU 闪存文件系统详解:LittleFS + NVS + 块设备设计实战

&#x1f9e0;关键词&#xff1a;Zephyr 文件系统、LittleFS、NVS、Flash 分区、嵌入式存储、断电保护、wear leveling &#x1f4cc; 1. 为什么 MCU 上需要文件系统&#xff1f; 在嵌入式开发中&#xff0c;很多开发者起初直接操作 Flash 保存参数&#xff0c;但随着需求增长…...

ICML 2025 | 时间序列(Time Series)论文总结

ICML 2025将在2025年7月13日至7月19日&#xff08;周六&#xff09;在温哥华会议中心举行&#xff0c;本文总结了ICML 2025有关时间序列(Time Series)相关文章&#xff0c;共计63篇。 时间序列Topic&#xff1a;预测&#xff0c;分类&#xff0c;异常检测&#xff0c;生成&…...

理解后端开发中的中间件(以gin框架为例)

中间件(Middleware)是后端开发中的一个核心概念&#xff0c;它在请求(Request)和响应(Response)之间扮演着桥梁角色。以下是关于中间件的详细解释&#xff1a; 基本概念 中间件是在请求到达最终处理程序之前或响应返回客户端之前执行的一系列函数或组件。它可以&#xff1a; 访…...

【分布式技术】Bearer Token以及MAC Token深入理解

Bearer Token以及MAC Token深入理解 **Bearer Token 详解****1. 什么是 Bearer Token&#xff1f;****2. Bearer Token 的构建详情****&#xff08;1&#xff09;生成流程****&#xff08;2&#xff09;Token 示例&#xff08;JWT&#xff09;****&#xff08;3&#xff09;Tok…...

WebRTC(七):媒体能力协商

目的 在 WebRTC 中&#xff0c;每个浏览器或终端支持的音视频编解码器、分辨率、码率、帧率等可能不同。媒体能力协商的目的就是&#xff1a; 确保双方能“听得懂”对方发的媒体流&#xff1b;明确谁发送、谁接收、怎么发送&#xff1b;保障连接的互操作性和兼容性。 P2P的基…...

(线性代数最小二乘问题)Normal Equation(正规方程)

Normal Equation&#xff08;正规方程&#xff09; 是线性代数中的一个重要概念&#xff0c;主要用于解决最小二乘问题&#xff08;Least Squares Problem&#xff09;。它通过直接求解一个线性方程组&#xff0c;找到线性回归模型的最优参数&#xff08;如权重或系数&#xff…...

【机器学习】数学基础——标量

目录 一、标量的定义 二、标量的核心特征&#xff1a;无方向的纯粹量级 2.1 标量 vs 矢量 直观对比 三、 标量的数学本质&#xff1a;零阶张量 3.1 张量阶数金字塔 3.2 标量的数学特性 四、 现实世界的标量图谱 4.1 常见标量家族 4.2 经典案例解析 五、 标量的运算奥秘…...

基于python代码的通过爬虫方式实现TK下载视频(2025年6月)

Tk的视频页面通常需要登录才能获取完整数据,但通过构造匿名游客的请求,我们可以绕过登录限制,提取视频的元信息(如标题、ID和播放地址)。核心思路如下: 构造匿名Cookie:通过模拟浏览器的请求,获取Tk服务器分配的游客Cookie。解析网页:利用BeautifulSoup解析HTML,定位…...

Go 语言的堆糖图片爬虫

基于 Go 语言的堆糖图片爬取探索之旅 在互联网的浩瀚海洋中&#xff0c;堆糖网以其丰富多样的高清图片、美图壁纸等内容吸引了众多用户。对于图片爱好者来说&#xff0c;能高效获取心仪的图片资源无疑是一件极具吸引力的事情。今天&#xff0c;就带大家走进一段基于 Go 语言的…...

python+uni-app基于微信小程序的儿童安全教育系统

文章目录 具体实现截图本项目支持的技术路线源码获取详细视频演示&#xff1a;文章底部获取博主联系方式&#xff01;&#xff01;&#xff01;&#xff01;本系统开发思路进度安排及各阶段主要任务java类核心代码部分展示主要参考文献&#xff1a;源码获取/详细视频演示 ##项目…...

DAY 39 图像数据与显存

图像数据的格式&#xff1a;灰度和彩色数据模型的定义显存占用的4种地方 模型参数梯度参数优化器参数数据批量所占显存神经元输出中间状态 batchisize和训练的关系 import torch import torch.nn as nn import torch.optim as optim from torch.utils.data import DataLoader ,…...

ELK搭建

1、elasticsearch和kibana搭建配置见 https://blog.csdn.net/yh_zeng2/article/details/148812447?spm1001.2014.3001.5501 2、logstash 下载 下载和elasticsearch版本一致的logstash&#xff0c;下载地址&#xff1a; Past Releases of Elastic Stack Software | Elastic …...

【ELK(Elasticsearch+Logstash+Kibana) 从零搭建实战记录:日志采集与可视化】

ELK(ElasticsearchLogstashKibana) 从零搭建实战记录&#xff1a;日志采集与可视化 本文记录了我在搭建ELK(Elasticsearch, Logstash, Kibana)技术栈时的完整实战过程。使用Docker Compose快速搭建了ELK服务端&#xff08;监控主机&#xff09;&#xff0c;并通过Filebeat实现…...

反无人机系统:技术利刃如何守护低空安全?

反无人机系统&#xff1a;技术利刃如何守护低空安全&#xff1f; ——从军事防御到城市安防的全景解析 一、技术体系&#xff1a;从“电磁软杀伤”到“激光硬摧毁”的立体防御网 反无人机技术本质是一场“降维打击”&#xff1a;用百万级防御系统对抗千元级消费无人机。当前…...

第十章——8天Python从入门到精通【itheima】-102-Python基础综合案例-数据可视化(pyecharts的入门使用+数据处理)

目录 102节——pyecharts的入门使用 1.学习目标 2.pyecharts入门——基础折线图 3.pyecharts的配置对象有哪些&#xff1f; 4.全局配置——set_global_opts 5.小节总结 103节——数据处理 1.学习目标 2.无法继续关于第一阶段的pyecharts的相关学习 因为关于JSON数据获…...

Neo4j 中存储和查询数组数据的完整指南

Neo4j 中存储和查询数组数据的完整指南 图形数据库 Neo4j 不仅擅长处理节点和关系&#xff0c;还提供了强大的数组(Array)存储和操作能力。本文将全面介绍如何在 Neo4j 中高效地使用数组&#xff0c;包括存储、查询、优化以及实际应用场景。 数组在 Neo4j 中的基本使用 数组…...

云原生/容器相关概念记录

文章目录 网络与虚拟化技术云平台与架构容器与编排容器网络方案性能优化与工具硬件与协议 网络与虚拟化技术 P4可编程网关 P4: Programming Protocol-independent Packet Processors一种基于P4语言的可编程网络设备&#xff0c;支持自定义数据包处理逻辑。P4可编程技术详解&am…...

uni-app项目实战笔记21--uniapp缓存的写入和读取

一、缓存的写入 uni.setStorageSync("storageClassList",classifyList.value) 二、缓存的读取&#xff0c;如果缓存不存在&#xff0c;则返回空数组 const storageClassList uni.getStorageSync("storageClassList") || []; 三、对读取到的数据进行转…...

操作系统概述

覆盖了操作系统概述、运行机制、中断、异常、操作系统的五大结构、虚拟机。 借鉴&#xff1a;王道、我的好朋友杨某、我的笔记。 一、操作系统概念 概念 1.操作系统体现了封装思想 由于底层硬件只接受二进制的指令不方便用户操作&#xff0c;所以操作系统把这些封装成简易的…...

探索数据的力量:Elasticsearch中指定链表字段的统计查询记录

目录 一、基本的数据结构说明 二、基本的统计记录 &#xff08;一&#xff09;统计当前索引中sellingProducts的所有类型 &#xff08;二&#xff09;检索指定文档中sellingProducts的数据总量 &#xff08;三&#xff09;检索指定文档中sellingProducts指定类型的数量统计…...

【Datawhale组队学习202506】YOLO-Master task03 IOU总结

系列文章目录 task01 导学课程 task02 YOLO系列发展线 文章目录 系列文章目录前言1 功能分块1.1 骨干网络 Backbone1.2 颈部网络 Neck1.3 头部网络 Head1.3.1 边界框回归头1.3.2 分类头 2 关键概念3 典型算法3.1 NMS3.2 IoU 总结 前言 Datawhale是一个专注于AI与数据科学的开…...

C/C++数据结构之静态数组

概述 静态数组是C/C中一种基础的数据结构&#xff0c;它允许用户在编译时便确定数组的大小&#xff0c;并分配固定数量的连续存储空间来存放相同类型的元素。静态数组的主要特点是&#xff1a;其大小在声明时就必须指定&#xff0c;且在其生命周期内保持不变。这也意味着&#…...

pyqt f-string

文章目录 一、f-string的基本语法二、代码中的具体应用拼接效果 三、f-string的核心优势四、与其他字符串格式化方式的对比五、在Qt程序中的实际作用六、扩展用法&#xff1a;在f-string中添加格式说明 Python的 f-string&#xff08;格式化字符串字面值&#xff09; 特性&…...

夏普 AR-2348SV 打印机信息

基本信息&#xff1a;这是一款黑白 A3 激光多功能数码复合机&#xff0c;可实现打印、复印、扫描功能。性能参数 打印 / 复印速度&#xff1a;23 张 / 分钟。分辨率&#xff1a;600x600dpi&#xff0c;能确保文字和图像清晰。最大打印 / 复印尺寸&#xff1a;A3。纸张支持&…...

跨个体预训练与轻量化Transformer在手势识别中的应用:Bioformer

目录 一、从深度学习到边缘部署&#xff0c;手势识别的新突破 &#xff08;一&#xff09;可穿戴设备 边缘计算 个性化医疗新可能 &#xff08;二&#xff09;肌电信号&#xff08;sEMG&#xff09;&#xff1a;手势识别的关键媒介 &#xff08;三&#xff09;挑战&#…...