---

CSS3 @media 查询

简介

CSS3 @media 查询允许根据设备的不同尺寸和其他特性来应用不同的样式规则。使用@media规则的样式只在满足查询条件时应用。这使得Web开发人员能够根据特定设备或浏览器属性指定更准确的样式。

语法

@media 查询 { CSS规则 }

查询包含一个媒体类型和一个或多个媒体特性。

媒体类型包括以下几种：

• all: 应用于所有类型的设备
• screen: 应用于计算机屏幕
• print: 应用于打印预览模式和打印机页面
• speech: 应用于屏幕阅读器

媒体特性通常描述设备的状态和性能特征，例如：

• width: 设备的宽度，通常以像素为单位
• height: 设备的高度，通常以像素为单位
• aspect-ratio: 设备宽度与高度之比
• min-width: 设备的最小宽度
• max-width: 设备的最大宽度
• device-width: 设备屏幕的宽度，通常以像素为单位
• device-height: 设备屏幕的高度，通常以像素为单位

示例使用

@media screen and (min-width: 480px) { body { background-color: lightblue; } }

该规则将在屏幕宽度大于或等于480px时将body元素的背景颜色更改为浅蓝色。

@media screen and (max-width: 760px) { body { font-size: 14px; } }

该规则将在屏幕宽度小于或等于760px时将body元素的字体大小更改为14像素。

@media print { #navigation { display: none; } }

该规则将在打印预览模式或打印机页面上删除导航菜单元素。

结论

CSS3 @media查询是一个强大的工具，可以根据设备的不同特性为不同屏幕大小和设备类型创建具有响应能力的网站。它提供了创建完全响应式设计和可读性更好的内容的能力。在处理网站响应性时，@media查询是不可或缺的。