Question

我正在为本地公司使用PhoneGap构建一个基本的Web应用程序。我已经为应用程序顶部的标题/横幅创建了两个图像。一个针对纵向方向进行了优化，一个针对景观进行了优化。我希望能够根据设备的持有方式显示其中一个。我一直在阅读有关媒体查询的内容，坦率地说，它有点过于复杂，因为我需要处理其余的功能，而我只使用一个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; }
}

Answer 2

这是一个关于如何使用媒体查询的答案，这是解决问题的一种非常简单的方法。但一个先决条件是可以将图像显示为css背景，而不是<img ... />

伪代码

.my-banner {
  ...declarations like:
  background-position: 
  border: 
  margin: 
  padding: 
}
@media all and (max-width: 320px) {
  .my-banner {
  background-image: url(portrait.png);
}
@media all and (min-width: 321px) {
  .my-banner {
  background-image: url(landscape.png);
}

根据设备方向更改图像

2 个答案: