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

【CSS】CSS3媒体查询全攻略

news 2025/7/5 8:31:38

媒体查询教程

媒体查询(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)、not和only来组合媒体查询：

/* 横屏且最小宽度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">