Safari 版本 10+ 媒体查询

Safari 是一款流行的网页浏览器，它支持使用媒体查询来根据设备的特性和屏幕尺寸应用不同的样式。在 Safari 版本 10+ 中，我们可以利用媒体查询来创建响应式的网页布局和样式。

屏幕宽度媒体查询

我们可以使用 min-width 和 max-width 属性来控制不同屏幕宽度下的样式。

/* 当屏幕宽度大于等于 768px 时应用以下样式 */
@media (min-width: 768px) {
  /* 在此处添加针对大屏幕的样式 */
}

/* 当屏幕宽度小于等于 767px 时应用以下样式 */
@media (max-width: 767px) {
  /* 在此处添加针对小屏幕的样式 */
}

高分辨率屏幕媒体查询

如果你想在高分辨率的屏幕上显示不同的样式，可以使用 min-device-pixel-ratio 属性。

/* 当设备的像素密度大于等于 2 时应用以下样式 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* 在此处添加针对高分辨率屏幕的样式 */
}

系统主题媒体查询

Safari 10+ 还支持根据设备主题应用不同的样式。根据用户的系统设置，浅色或深色主题可以在不同的浏览器上设置或自动切换。

/* 当设备的主题为浅色时应用以下样式 */
@media (prefers-color-scheme: light) {
  /* 在此处添加针对浅色主题的样式 */
}

/* 当设备的主题为深色时应用以下样式 */
@media (prefers-color-scheme: dark) {
  /* 在此处添加针对深色主题的样式 */
}

以上是 Safari 版本 10+ 中常用的媒体查询示例。你可以根据具体需求结合其他属性和值来定义适合你的网页样式。

注意：由于 Markdown 不支持实际的 CSS 代码运行，以上代码只是示例，如需在实际页面中应用，请将代码片段复制到你的 CSS 文件中。