Question

我希望可点击的div适合iphone 6屏幕尺寸（每行一个）和ipad两行可点击的div。可以任何一个人告诉我如何实现这个任务。谢谢提前。

    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">


</head>

<body>


<section id="MainSection" class ="programs">
<div class="container">
<div class="row">
<div class="section-title">
<h2>
<a id="main_content" href="./secionOne">Section one</a>
</h2>
</div>

<div class ="image">
    <a href="..." style="display: block; height: 100%">
        <img src="./1.jpg" alt=".." />
    </a>
</div>


<div class ="image">
    <a href="..." style="display: block; height: 100%">
        <img src="./2.jpg" alt=".." />
    </a>
</div>

</div> 
</div> 
</section>
</body>
</html>

Answer 1

你有两个大容器（.container和.row）;一个是不必要的。所以删除它。然后，您有两种方法可以实现目标：

1 - 让容器像这样弯曲：

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

2 - 或者在.image div上使用float:left;，如下所示：

.image {  
  float: left;  
}

执行其中一个选项后，将.image divs宽度设置为50％并添加媒体查询，让它在小型设备上占据整个屏幕宽度：

@media (max-width: 740px){
.image {
  width: 100%;
}
}

最后，在带边距/填充的元素上添加box-sizing: border-box;＆gt;零以避免总宽度总和超过100％并使用以下css来避免图像落到下一行时行之间的间隙：

img {
  vertical-align: top;
}

演示：Codepen Flex;

演示：Codepen Float.

如何调整iphone和ipad屏幕的可点击div宽度和高度？

1 个答案: