常用 CSS Media Query 记录

配图源自 Freepik
  • @media 用于基于一个或多个媒体查询的结果来应用样式表中的一部分。
  • @supports 指定依赖于浏览器中的一个或多个特定的 CSS 功能的支持声明。

深色模式

@media (prefers-color-scheme: dark) {
  /* some rules */
}

prefers-color-scheme

Safari

Safari for Mac 和 Safari for Mobile（包括 iOS 端的 Chrome 等使用 Webkit 内核的浏览器）。

@supports (-webkit-hyphens: none) {
  /* some rules */
}

-webkit-hyphens

Safari for Mobile

移动端 Safari 浏览器（包括 iOS 端的 Chrome 等使用 Webkit 内核的浏览器），但不包括 Safari for Mac。

@supports (-webkit-touch-callout: none) {
  /* some rules */
}

-webkit-touch-callout

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容