CSS Media Query屏幕方向问题

Question

我正在使用此媒体查询目标视口最大宽度800px设备mininmum与400px

@media screen and (max-width: 800px) and (min-device-width: 400px)
{
body {background:#fff;}
}

我需要更改横向的颜色,我使用此代码

@media screen and (orientation:landscape)
{
body {background:red;}
}

它在设备上运行良好,但背景红色适用于PC浏览器,如何仅在设备横向方向上应用背景红色？

谢谢.

Answer 1

您没有选择要应用背景的元素

@media screen and (orientation:landscape)
{background:red;}

应该是这样的:

@media screen and (max-device-width: 1000px) 
              and (orientation:landscape){
  body {
    background: red;
  }
}

max-device-width应该让它忽略桌面,如果你没有放入device桌面,它仍然会影响使浏览器变小的桌面.