CSS参考手册
媒体查询 | Media Queries
媒体查询 | Media Queries
Media Queries 媒体查询
媒体查询是响应式设计的关键组成部分,这使得CSS可以根据各种参数或设备特性进行调整。例如,如果屏幕小于特定尺寸,或者基于用户是以纵向模式还是横向模式持有他们的设备,则媒体查询可以应用不同的样式。该@media
@规则用于有条件地应用样式到文档。
另外,媒体查询语法也用于其他上下文中,例如在<source>
元素的media
属性中,其可以被设置为媒体查询字符串以用于在选择要在特定图像中,使用的特定图像时确定是否使用该源<picture>
元件。
另外,该Window.matchMedia()
方法可以用于针对媒体查询来测试窗口。
MediaQueryList.addListener()
只要查询的状态发生变化,您也可以使用这些通知。借助此功能,您的网站或应用可以响应设备配置,方向或状态的更改。
您可以在测试媒体查询中了解更多关于使用媒体查询进行编程的信息
参照系
规则
@import
@media
导轨
使用媒体查询
介绍媒体查询及其语法,以及用于构建媒体查询表达式的运算符和媒体功能。测试媒体查询描述如何从JavaScript代码测试媒体查询,以编程方式确定设备的状态,并设置当媒体查询的结果发生变化时(例如,当用户旋转屏幕,导致方向改变时),可以通知报告给您的代码。
规范
Specification |
Status |
Comment |
---|---|---|
CSS Conditional Rules Module Level 3 |
Candidate Recommendation |
|
Media Queries Level 4 |
Working Draft |
|
Media Queries |
Recommendation |
|
CSS Level 2 (Revision 1) |
Recommendation |
Initial definition |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
---|---|---|---|---|---|---|
Basic support |
1.0 |
(Yes) |
1.0 (1.7 or earlier) |
9.0 |
9.2 |
1.3 |
Feature |
Android |
Edge |
Firefox Mobile (Gecko) |
IE Mobile |
Opera Mobile |
Safari Mobile |
---|---|---|---|---|---|---|
Basic support |
1.0 |
(Yes) |
1.0 (1.7) |
9.0 |
9.0 |
3.1 |
媒体查询 | Media Queries相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。