CSS3媒体查询：轻松实现移动端页面适配与优化秘籍

引言

随着移动互联网的快速发展，移动设备已经成为人们获取信息、进行交流的主要渠道。为了确保网站在不同设备上都能提供良好的用户体验，移动端页面适配与优化变得尤为重要。CSS3媒体查询是实现这一目标的重要工具之一。本文将详细介绍CSS3媒体查询的使用方法，帮助您轻松实现移动端页面适配与优化。

一、什么是CSS3媒体查询？

CSS3媒体查询是一种根据设备的特性（如屏幕尺寸、分辨率等）来应用不同样式规则的技术。通过媒体查询，我们可以为不同设备定制不同的样式，从而实现移动端页面的适配与优化。

二、媒体查询的基本语法

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

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

其中，media-type表示媒体类型，如screen（屏幕）、print（打印）等；expression表示媒体查询的条件，如max-width: 600px（屏幕宽度不超过600像素）。

三、常用媒体查询条件

以下是一些常用的媒体查询条件：

max-width：表示最大宽度，如max-width: 600px；
min-width：表示最小宽度，如min-width: 600px；
width：表示宽度，如width: 600px；
orientation：表示屏幕方向，如orientation: landscape（横屏）或orientation: portrait（竖屏）。

四、媒体查询实例

以下是一个使用媒体查询的实例，用于为不同屏幕宽度的设备定制样式：

/* 默认样式 */ body { font-size: 16px; } /* 屏幕宽度小于600像素时 */ @media screen and (max-width: 600px) { body { font-size: 14px; } } /* 屏幕宽度大于600像素时 */ @media screen and (min-width: 600px) { body { font-size: 18px; } }

在上面的例子中，当屏幕宽度小于600像素时，字体大小为14像素；当屏幕宽度大于600像素时，字体大小为18像素。

五、媒体查询的嵌套与继承

媒体查询可以嵌套使用，以实现更精细的样式定制。此外，媒体查询的样式规则会继承父级媒体查询的样式规则。

/* 父级媒体查询 */ @media screen and (max-width: 600px) { body { background-color: #f0f0f0; } } /* 嵌套媒体查询 */ @media screen and (max-width: 600px) { .container { padding: 10px; } }

在上面的例子中，当屏幕宽度小于600像素时，body元素的背景颜色为灰色，同时.container元素的padding属性也会应用这个背景颜色。