媒体查询 | Media Queries
Media Queries 媒体查询
媒体查询是响应式设计的关键组成部分,这使得CSS可以根据各种参数或设备特性进行调整。例如,如果屏幕小于特定尺寸,或者基于用户是以纵向模式还是横向模式持有他们的设备,则媒体查询可以应用不同的样式。该@media
@规则用于有条件地应用样式到文档。
另外,该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 |
本文档系腾讯云开发者社区成员共同维护,如有问题请联系 cloudcommunity@tencent.com