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

Question

我正在为一家本地公司使用 PhoneGap 构建一个基本的网络应用程序。我在应用程序顶部为页眉/横幅创建了两个图像。一种针对纵向进行了优化，一种针对横向进行了优化。 我希望能够根据设备的握持方式显示其中任何一个。我一直在阅读媒体查询，坦率地说，它对我的​​需求来说有点过于复杂，因为 JQuery Mobile 会为我处理其余功能，而我只为整个应用程序使用一个 CSS。

有没有人可以添加几行简单的代码来帮助解决这个问题？

Answer 1

您可以使用 CSS 媒体查询进行纵向和横向方向，一点也不复杂:

@media screen and (orientation: portrait) { ... }
@media screen and (orientation: landscape) { ... }

使用这些媒体查询，您可以覆盖 background-image对于任何方向。

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

有两种使用方式:

假设您有 <div>与类 header :

@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; }
}