Media Query

定义 Definition

Media query（媒体查询）是 CSS 中的一种技术，用于根据设备的特性（如屏幕宽度、分辨率、方向等）来应用不同的样式规则，从而实现响应式网页设计。

发音 Pronunciation

/ˈmiːdiə ˈkwɪəri/

例句 Examples

The website uses a media query to adjust its layout on mobile devices.
这个网站使用媒体查询来调整其在移动设备上的布局。

By combining multiple media queries, developers can create fluid designs that respond gracefully to everything from small smartphone screens to large desktop monitors.
通过组合多个媒体查询，开发者可以创建流畅的设计，使其从小型智能手机屏幕到大型桌面显示器都能优雅地适配。

词源 Etymology

Media 源自拉丁语 medium，意为"中间、媒介"，在现代英语中指传播信息的载体或设备类型。Query 源自拉丁语 quaerere，意为"询问、查询"。两词组合起来，字面意思是"对媒体（设备）进行查询"，即检测当前设备的特征并据此做出响应。该术语随 CSS3 规范的引入而广泛使用，最早在 2012 年被 W3C 正式推荐为标准。

相关词汇 Related Words

• Responsive Design
• Breakpoint
• Viewport
• CSS
• Flexbox
• Grid Layout
• Adaptive Design

文学与技术文献引用 Notable References

• 《Responsive Web Design》（Ethan Marcotte, 2011）——这本开创性的著作首次系统阐述了响应式设计理念，media query 是其中的核心技术之一。
• 《CSS: The Definitive Guide》（Eric A. Meyer & Estelle Weyl）——该书详细讲解了 media query 的语法与应用场景。
• W3C CSS Media Queries 规范文档——作为官方技术标准，定义了 media query 的完整语法和行为规则。