1

我在我的网站上使用以下代码来减小 ipad 纵向上的 div 的大小，并且它工作成功。

@media only screen and (min-width: 768px) and (max-width: 959px) {
   .mosaic-block {
      width: 226px;
      height: 135px;
    }
}

iOS 肖像

但是，当我将方向更改为横向时，div 保持相同的值，而不是返回到 div 的默认较大尺寸。

在此处输入图像描述

如果站点直接加载到横向模式 - 它会正确显示（以较大的尺寸）。

当用户将方向从纵向切换到横向时，如何确保应用较大的 css div 尺寸？

4

2 回答 2

2

我认为您的媒体查询不正确 - ipad 的宽度/高度在旋转时不会改变，只有方向会改变。尝试将您的媒体查询更新为：

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
  .mosaic-block {
    /* default size here */
  }
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
  .mosaic-block {
    width: 226px;
    height: 135px;
  }
}

参考：CSS-Tricks 媒体查询

于 2012-06-30T12:49:48.700 回答
0

这有助于我正确定位 iPad 肖像。事实证明，我正确地调整了 .mosaic-block 的大小，但应该调整包含的图像的大小。

我正在使用amazium 框架进行响应式设计，并使用mosaic.js进行动画翻转。这是完整的 HTML：

<div class="mosaic-block fade">

<a href="image.jpg" rel="shadowbox" target="_blank" class="mosaic-overlay details"
title="Title">
        <h4>A title</h4> 
        <p><span>Subheading:</span></p>
        <ul>
            <li><p>Some text</p></li>
            <li><p>Some more text</p></li>
            <li><p>Even more text</p></li>                                                              
        </ul>   
</a>
<div class="mosaic-backdrop"><img src="backdrop_image.jpg" class="max-image"/></div>

Amazium 使用 .max-image 规则来改变不同分辨率下的图像大小：

.max-image  { width:100%; height:auto; }

我的解决方案是在 ipad 肖像上为 .max-image 设置特定的图像大小：

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
.max-image {
width:286px;
height:171px;
}
}

非常感谢 JunkMyFunk 先生的建议。

于 2012-07-03T12:31:25.713 回答