CSS响应式设计 – 检测肖像显示

我知道纯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 */
}

(source)

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

是的,使用以下语法:

@media all and (orientation: landscape) {}

有关更多信息,请参见w3 specs.

翻译自:https://stackoverflow.com/questions/16373888/css-responsive-design-detect-portrait-display

转载注明原文:CSS响应式设计 – 检测肖像显示