Question

目前正在为我的客户在移动网站上工作但无法完成以下工作。该移动网站的主页分为2个大图像，供用户自行选择。通过使用以下代码在主页上堆叠图像，纵向模式可以完美地工作。

<p><a href="/female"><img alt="" src="image1.jpg" style="width: 100%; height: 51%; position: absolute; margin-top:0; left:0; right:0;" /></a>
<a href="/male"><img alt="" src="image2.jpg" style="width: 100%; height: 49%; position: absolute; bottom:0; left:0; right:0;" /></a></p>

在纵向模式下，这在所有设备上都能正常工作，但问题是，只要这些设备在纵向模式下使用，图像就会被拉得太大。这当然是因为100％的宽度。

在理想的情况下;当切换到横向时，两个完全不同的图像并排放在一起。

实施例

     ___                 ________
    | 1 |               | 1   2  |
    |_2_|               |________|
Portrait mode         Landscape mode

希望我的绘画有意义。

Answer 1

您可以使用有关属性orientation的@media规则查询，仅当orientation为portrait时才会应用该规则（默认情况下为横向广告）：

img {
  width: 100%;
  height:100%;   
  box-sizing:border-box;
  border:1px solid green;
}
a {
  display:inline-block;    
  width:50%;        
}
@media only screen and (orientation:portrait) {
  a {
     display:block;        
     width:100%;
  }
}

这是working fiddle. 要测试小提琴，您必须尝试调整显示窗口的大小，使其从横向更改为纵向，反之亦然。

Answer 2

我只是使用javascript来完成此操作，您可以使用onorientationchange事件，而不是每个移动浏览器/设备或resize事件都支持该事件。

切换到横向时更改图像的顺序

2 个答案: