CSS新手求助：打印时检测页面方向的代码无法生效

你的代码存在两个关键问题，导致无法正常生效：

• CSS 中的颜色值不需要添加单引号，你写的 'green' 和 'yellow' 属于无效语法，浏览器会直接忽略这些样式规则。
• 嵌套媒体查询的写法兼容性有限，更稳妥的方式是将打印条件与方向条件合并为复合媒体查询。

修正后的代码如下：

/* 打印模式下的横向布局样式 */
@media print and (orientation: landscape) {
  .card {
    background-color: green;
  }
}

/* 打印模式下的纵向布局样式 */
@media print and (orientation: portrait) {
  .card {
    background-color: yellow;
  }
}

额外提醒：部分浏览器默认禁用背景颜色打印功能，你需要在打印设置中开启「打印背景图形」选项，才能看到背景色的变化。

内容的提问来源于stack exchange，提问作者ERaufi