揭秘CSS3媒体查询：轻松应对多屏时代，解锁网页适配新技能

引言

随着互联网技术的发展，移动设备的多样性日益增加，从手机到平板电脑，再到各种尺寸的显示器，用户浏览网页的场景也越来越丰富。为了确保网页在不同设备上都能呈现出最佳效果，CSS3媒体查询应运而生。本文将深入解析CSS3媒体查询的原理、用法，并通过实例展示如何运用它来适配多屏设备。

一、什么是CSS3媒体查询？

CSS3媒体查询是一种在CSS中添加条件语句的方法，可以根据设备的特征（如屏幕尺寸、分辨率等）来应用不同的样式规则。通过媒体查询，我们可以为不同类型的设备定制不同的样式，从而实现网页的响应式设计。

二、媒体查询的基本语法

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

@media media-type and (expression) { /* CSS样式规则 */ }

其中，media-type 表示媒体类型，如 screen（屏幕）、print（打印）等；expression 是一个条件表达式，用于指定媒体查询的参数，如 width、height、orientation 等。

三、常用媒体查询参数

以下是一些常用的媒体查询参数及其用法：

1. 屏幕宽度

@media screen and (min-width: 600px) { /* 屏幕宽度大于或等于600px时应用的样式 */ }

2. 屏幕高度

@media screen and (min-height: 400px) { /* 屏幕高度大于或等于400px时应用的样式 */ }

3. 设备方向

@media screen and (orientation: landscape) { /* 竖屏时应用的样式 */ } @media screen and (orientation: portrait) { /* 横屏时应用的样式 */ }

4. 分辨率

@media screen and (min-resolution: 192dpi) { /* 分辨率大于或等于192dpi时应用的样式 */ }

四、媒体查询的嵌套与组合

在实际应用中，我们可能需要针对多个条件进行样式定制。这时，我们可以使用嵌套媒体查询和组合媒体查询来实现。

1. 嵌套媒体查询

@media screen and (min-width: 600px) { /* 屏幕宽度大于或等于600px时应用的样式 */ @media screen and (orientation: landscape) { /* 竖屏时应用的样式 */ } }

2. 组合媒体查询

@media screen and (min-width: 600px) and (orientation: landscape) { /* 屏幕宽度大于或等于600px且为横屏时应用的样式 */ }

五、实例：响应式网页设计

以下是一个简单的响应式网页设计实例，演示如何使用媒体查询实现不同屏幕尺寸下的样式调整。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>响应式网页设计实例</title> <style> body { font-family: Arial, sans-serif; } /* 默认样式 */ .container { width: 100%; max-width: 600px; margin: 0 auto; } /* 屏幕宽度大于或等于600px时的样式 */ @media screen and (min-width: 600px) { .container { width: 80%; } } /* 屏幕宽度大于或等于800px时的样式 */ @media screen and (min-width: 800px) { .container { width: 70%; } } </style> </head> <body> <div class="container"> <h1>响应式网页设计实例</h1> <p>这是一个响应式网页设计实例，根据屏幕尺寸自动调整布局。</p> </div> </body> </html>

在上述实例中，当屏幕宽度大于或等于600px时，.container 的宽度变为80%；当屏幕宽度大于或等于800px时，.container 的宽度变为70%。