css – 根据设备方向更改图像

@media screen and (orientation: porTrait) { ... }
@media screen and (orientation: landscapE) { ... }

使用这些媒体查询,您可以覆盖任何方向的背景图像.

官方文件：http://www.w3.org/TR/css3-mediaqueries/#orientation

有两种使用方法：

假设你有< div>使用类标题：

@media screen and (orientation: porTrait)
{
    div.header { BACkground-image:url(image1.jpg); }
}
@media screen and (orientation: landscapE)
{
    div.header { BACkground-image:url(image2.jpg); }
}

或者,您可能希望使用< img>标签.在这种情况下,您将需要其中两个,并且只使用CSS规则隐藏/显示一个.让我们说,< img>标签分别有header-land和header-porTrait类：

@media screen and (orientation: porTrait)
{
    .header-land { display:none; }
    .header-porTrait { display:inline-block; }
}
@media screen and (orientation: landscapE)
{
    .header-land { display:inline-block; }
    .header-porTrait { display:none; }
}