CSS响应式设计 - 检测人像显示

Question

我知道纯CSS可以根据屏幕尺寸调整样式表,如下所示:

@media (max-width: 959px) {
  /* styles for smallest viewport widths */
}

@media (min-width: 600px) and (max-width: 959px) {
  /* styles for mid-tier viewport widths */
}

@media (min-width: 960px) {
  /* original CSS styles */
}

^(来源)

是否可以使用纯CSS来检查横向或纵向显示？

Answer 1

是的,使用以下语法:

@media all and (orientation: landscape) {}

有关更多信息,请参阅w3规范.