如何調整iphone和ipad屏幕的可點擊的div寬度和高度？

我想要可點擊的div適合iphone 6的屏幕尺寸（每行一個）和ipad兩個可點擊的div在一行中。任何人都可以告訴我我是如何實現這一任務的。提前感謝。如何調整iphone和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>

來源

2016-03-07 user1788736

您是否使用Bootstrap等網格系統進行過研究？ – jonmrich

你有兩個大的容器（.container和.row）;一個是不必要的。所以刪除它。然後，你有兩種方式來實現自己的目標：

- 讓容器彎曲這樣的：

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

- 或使用您的div的圖像配像float:left;這樣：

.image { 
    float: left; 
}

執行這些選項之一後，將.image divs寬度設置爲50％並添加一個媒體查詢以使其在sma上的整個屏幕寬度LL裝置：

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

最後，添加box-sizing: border-box;與餘量/填充的元素>零，以避免被超過100％的總寬度之和，並使用此以下CSS避免行時之間的間隙圖像下降到下一行：

img { 
    vertical-align: top; 
}

演示：Codepen Flex;

演示：Codepen Float.

來源

2016-03-07 17:13:56

感謝您的回覆。適用於iphone屏幕，但如何爲iPad創造新風格，這樣兩個div適合一行（以及兩個div之間的差距和行左右的空白）？注意：我可以檢查用戶代理是iPhone或iPad，併爲每個設備使用不同的風格！ – user1788736

當有足夠的空間時，它們將在一行中。我用一個例子更新了答案，請檢查它; –

我在ipad 2上測試了你的更新代碼，仍然是一行中的一個大圖像，每一行之間的差距很大，圖像右側的差距很大！我想要兩個圖像在一行中，並且在兩個圖像之間以及屏幕的左側和右側之間存在差距！這可以使用單獨的樣式完成（通過檢查用戶代理的iPhone和iPad，併爲每個設備使用不同的風格）？ – user1788736

如何調整iphone和ipad屏幕的可點擊的div寬度和高度？

回答

相關問題