Media Query

释义 Definition

媒体查询：网页前端（尤其是 CSS）中的一种语法，用来根据设备或浏览环境的特征（如屏幕宽度、分辨率、方向、是否可打印等）应用不同的样式，从而实现响应式设计。也可泛指在网页开发中“针对不同媒体/条件做条件判断”的规则。（在更广义语境中也可能指“媒体领域的调查/询问”，但最常见用法是 CSS 术语。）

发音 Pronunciation (IPA)

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

例句 Examples

This layout changes with a media query.
这个布局会通过媒体查询而改变。

If the viewport is narrower than 600px, the media query switches the navigation into a vertical menu to improve readability on small screens.
如果视口宽度小于 600 像素，媒体查询会把导航切换为竖排菜单，以提升小屏幕上的可读性。

词源 Etymology

media 源自拉丁语 medium（“媒介、介质”），在计算机领域常指“媒体类型/呈现环境”（如 screen、print）。query 来自拉丁语 quaerere（“询问、寻求”），在技术语境中常指“查询/条件判断”。合在一起，media query 就是“对媒体（呈现环境）条件进行查询”，从而决定采用哪套样式规则。

相关词 Related Words

• Responsive
• Breakpoint
• Viewport
• Stylesheet
• CSS
• Flexbox
• Grid
• Print

文学与著作中的用例 Literary / Notable Works

• CSS: The Definitive Guide（Eric A. Meyer）——在响应式与样式规则章节中讨论媒体查询的用法与写法。
• HTML and CSS: Design and Build Websites（Jon Duckett）——介绍响应式网页设计时使用媒体查询作为核心工具之一。
• W3C / WHATWG 相关规范文档（如 Media Queries 规范、CSS 规范）——以正式术语与语法定义的形式大量出现该词。