为 iPhone 和 iPad 屏幕重新调整 <div> 的大小

Question

在我的 jquery Mobile 应用程序中，我有一个包含页眉和页脚的页面，主要内容是 4 个 2x2 排列的图像。我选择在 div 中创建自己的 2x2 网格，因为我无法让 JM 网格工作。主要内容的代码如下所示：

        <div class="container">
            <div class="image">
                <a href="#intro">
                    <img src="img/Intro1.png" />
                    </a>
            </div>
            <div class="image">
                <a href="#putting">
                    <img src="img/Putting1.png" />
                    </a>
            </div>
            <div class="image">
                <a href="#chipping">
                    <img src="img/Chipping1.png" />
                    </a>
            </div>
            <div class="image">
                <a href="#sand">
                    <img src="img/SandPlay1.png" />
                    </a>
            </div>
          </div>

安排一切的页面css如下所示：

.container {  
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap; 
}

.container .image {
  width: 50%;
}

.container img {
  width: calc(100% - (5px * 2));
  margin: 5px;
}

这在 iPhone 上运行良好，但在 iPad 上图像太大。在 iPad 上，图像是全宽，这使得它们超出了屏幕的底部边缘。我已经到处寻找解决方案，最后决定来这里。提前感谢您的任何帮助/指导。

Answer 1

您要使用的是媒体查询。对于 ipad 的问题，您可以设置媒体查询，以便在平板电脑/ipad 尺寸上查看您的页面时，您可以指定图像的尺寸和其他任何内容。看看这个例子：

.sample {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  color: #ffffff ;
  font-size: 7rem;
  position: absolute;
  top: 17%;
  width: 100%;
}
    @media screen and (max-width: 900px){

  .sample {
  font-size: 3.5rem;
  margin: auto;
  width: 50%;
  padding-bottom: 100px;

    
  }
}

在上面您可以看到示例类（媒体查询外部和内部）根据屏幕大小具有不同的 css 样式。

查看此内容以获取更多信息：https://www.w3schools.com/css/css_rwd_mediaqueries.asp