내 경우에 반응 형 디자인을 만드는 방법은 무엇입니까?

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; 
} 

을하지만 작은 해상도와 아이 패드와 잘 작동하지 않았다. 어쨌든이 문제를 해결할 수 있을지 궁금합니다. 정말 고마워!

Answer 1

두 div를 만들고 내용을 내부 div에 배치하십시오. 화면 변경하는 경우, 콘텐츠는 당신이

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

을 필요로하는 크기와 asjust 폭에 따라 맞는 그러나 가장 좋은 방법은 사용하는 미디어

@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 */ }