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中。如果屏幕发生变化，内容将根据您的需要根据尺寸和宽度进行调整

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

如何在我的案例中创建响应式设计？

1 个答案: