如何在我的情況下創建一個響應式設計？

Question

我想在我的應用程序中創建5絕對定位元素。

問題是我需要讓他們響應桌面和ipad。

我有類似：

<div class='container wrapper'> 
    <a id='link1' href='#'><img src='img1.png'/></a> 
    <a id='link2' href='#'><img src='img2.png'/></a> 
    <a id='link3' href='#'><img src='img3.png'/></a> 
    <a id='link4' href='#'><img src='img4.png'/></a> 
    <a id='link5' href='#'><img src='img5.png'/></a> 
</div> 


.wrapper{ 
    position: relative; 
    -webkit-box-align:center; 
    -webkit-box-pack:center; 
    display:-webkit-box; 
    top:10%; 
    left:5%; 
} 

#link1{ 
    position: absolute; 
    top: 250px; 
    left: 0; 
} 
#link2{ 
    position: absolute; 
    top: 0; 
    left: 350px; 
} 
#link3{ 
    position: absolute; 
    top: 280px; 
    left: 700px; 
} 
#link4{ 
    position: absolute; 
    top: 600px; 
    left: 580px; 
} 
#link5{ 
    position: absolute; 
    top: 580px; 
    left: 180px; 
} 

它看起來罰款我的臺式機與某些決議，但並沒有與小分辨率和iPad很好地工作。我想知道是否有解決這個問題的方法。非常感謝！

Answer 1

創建兩個div並將內容放入內部div。如果屏幕的變化，內容將適合根據大小和asjust寬度，因爲你需要

#outerdiv{ 
    width:100%; 
} 
#innerdiv{ 
    width:50%; 
    height:100% 
} 

但最好的解決辦法是使用媒體查詢

@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ } 
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ } 
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ } 
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ } 
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ } 
@media (min-width:1281px) { /* hi-res laptops and desktops */ }