使用媒体查询检测设备的屏幕尺寸和方向

能者

要使用媒体查询来检测设备的屏幕尺寸和方向，您可以使用CSS中的`@media`规则。以下是一些示例查询，可用于检测不同的屏幕尺寸和方向：

1. 检测屏幕宽度：

[CSS] 纯文本查看 复制代码

@media only screen and (max-width: 600px) {
  /* 在宽度小于或等于600px时应用的样式 */
}

@media only screen and (min-width: 601px) and (max-width: 1024px) {
  /* 在宽度介于601px和1024px之间时应用的样式 */
}

@media only screen and (min-width: 1025px) {
  /* 在宽度大于或等于1025px时应用的样式 */
}

2. 检测屏幕方向：

[CSS] 纯文本查看 复制代码

@media only screen and (orientation: portrait) {
  /* 在纵向方向时应用的样式 */
}

@media only screen and (orientation: landscape) {
  /* 在横向方向时应用的样式 */
}

以上示例中，您可以根据需要调整媒体查询中的条件和样式。这些查询将使您能够根据设备的屏幕尺寸和方向应用不同的样式。请注意，由于设备和浏览器的差异，媒体查询可能会有所不同，请在多个设备上进行测试以确保适配性。