【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)、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">

现代响应式设计建议

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