響應式設計佈局

我想讓我的div響應。我創建了width:100%;和max-width: xx px;的div，但在調整瀏覽器大小時不會變得反應靈敏。任何人都可以幫助我嗎？響應式設計佈局

DEMO page。

.container { 
 
    position:relative; 
 
    width:100%; 
 
    max-width:1010px; 
 
    margin:0px auto; 
 
    margin-top:50px; 
 
    overflow:hidden; 
 
} 
 

 
.coverItem { 
 
    float:left; 
 
    width:100%; 
 
    position:relative; 
 
    border-radius:5px; 
 
    -webkit-border-radius:5px; 
 
    -moz-border-radius:5px; 
 
    background-color:#1d1f20; 
 
} 
 

 
.coverItem:nth-child(1) { 
 
    max-width:400px; 
 
    padding-top:385px; 
 
    margin-right:5px; 
 
} 
 

 
.coverItem:nth-child(2) { 
 
    max-width:350px; 
 
    padding-top:190px; 
 
    margin-right:5px; 
 
} 
 
.coverItem:nth-child(3) { 
 
    max-width:250px; 
 
    padding-top:190px; 
 
    margin-bottom:5px; 
 
} 
 
.coverItem:nth-child(4) { 
 
    max-width:190px; 
 
    padding-top:190px; 
 
} 
 
.coverItem:nth-child(5) { 
 
    max-width:215px; 
 
    padding-top:190px; 
 
    margin-left:5px; 
 
} 
 
.coverItem:nth-child(6) { 
 
    max-width:190px; 
 
    padding-top:190px; 
 
    margin-left:5px; 
 
}

<div class="container"> 
 
    <div class="coverItem"></div> 
 
    <div class="coverItem"></div> 
 
    <div class="coverItem"></div> 
 
    <div class="coverItem"></div> 
 
    <div class="coverItem"></div> 
 
    <div class="coverItem"></div> 
 
</div>

來源

2016-11-08 Azzo

哪裏是你的媒體查詢？ –

您沒有在代碼中添加媒體查詢。 –

@AbhishekPandey我想我不需要做每個像素的媒體查詢。這將是這樣的工作[DEMO]（http://codepen.io/shadowman86/pen/YWJdRW） – Azzo

嘿，使其反應迅速，寬度％

.container { 
 
position: relative; 
 
width: 100%; 
 
max-width: 1010px; 
 
margin: 0px auto; 
 
margin-top: 50px; 
 
overflow: hidden; 
 
} 
 
.coverItem { 
 
float: left; 
 
width: 100%; 
 
position: relative; 
 
border-radius: 5px; 
 
-webkit-border-radius: 5px; 
 
-moz-border-radius: 5px; 
 
background-color: #1d1f20; 
 
} 
 

 
.coverItem:nth-child(1) { 
 
max-width: 400px; 
 
padding-top: 385px; 
 
margin-right: 1%; 
 
width: 39%; 
 
} 
 
.coverItem:nth-child(2) { 
 
max-width: 350px; 
 
padding-top: 190px; 
 
margin-right: 1%; 
 
width: 34%; 
 
} 
 
.coverItem:nth-child(3) { 
 
max-width: 250px; 
 
padding-top: 190px; 
 
margin-bottom: 5px; 
 
width: 25%; 
 
} 
 
.coverItem:nth-child(4) { 
 
max-width: 200px; 
 
padding-top: 190px; 
 
width: 20%; 
 
} 
 
.coverItem:nth-child(5) { 
 
max-width: 200px; 
 
padding-top: 190px; 
 
margin-left: 1%; 
 
width: 19%; 
 
} 
 
.coverItem:nth-child(6) { 
 
max-width: 200px; 
 
padding-top: 190px; 
 
margin-left: 1%; 
 
width: 19%; 
 
}

<div class="container"> 
 
    <div class="coverItem"></div> 
 
    <div class="coverItem"></div> 
 
    <div class="coverItem"></div> 
 
    <div class="coverItem"></div> 
 
    <div class="coverItem"></div> 
 
    <div class="coverItem"></div> 
 
</div>

來源

2016-11-08 07:06:50

您也可以將'padding'設置爲'％'，這樣heigth也會變得快速響應。 –

@priya_singh謝謝你的回答。它工作正常，但我可以問你一個關於填充的問題。你可以看到，在調整大小時，填充不會改變，它幾乎停留在'padding-top：385px;'和'padding-top：190px;'所以我們可以做到這一點也響應？ – Azzo

@DevStud是的。您可以。我只是管理寬度。爲了使其充分響應，您應該嘗試使用％填充和保留邊距。 –

使用PX不會調整你的div動態不像如何等單位將。

嘗試使用相對的單位。這些響應單元的示例是％s和視口單位（vw，vh，vmin，vmax）。

DEMO PAGE

HTML

<div class="container"> 
    <div class="coverItem"></div> 
    <div class="coverItem"></div> 
    <div class="coverItem"></div> 
    <div class="coverItem"></div> 
    <div class="coverItem"></div> 
    <div class="coverItem"></div> 
</div>

CSS

.container { 
    position:relative; 
    width:100%; 
    max-width:90%; 
    margin:0px auto; 
    margin-top:5%; 
    overflow:hidden; 
} 

.coverItem { 
    float:left; 
    width:100%; 
    position:relative; 
    border-radius:5%; 
    -webkit-border-radius:5%; 
    -moz-border-radius:5%; 
    background-color:#1d1f20; 
} 

.coverItem:nth-child(1) { 
    max-width:36%; 
    padding-top:35%; 
    margin-right:0.5%; 
} 

.coverItem:nth-child(2) { 
    max-width:32%; 
    padding-top:17.2%; 
    margin-right:0.5%; 
} 
.coverItem:nth-child(3) { 
    max-width:22.7%; 
    padding-top:17.2%; 
    margin-bottom:0.5%; 
} 
.coverItem:nth-child(4) { 
    max-width:17.2%; 
    padding-top:17.2%; 
} 
.coverItem:nth-child(5) { 
    max-width:19.6%; 
    padding-top:17.2%; 
    margin-left:0.5%; 
} 
.coverItem:nth-child(6) { 
    max-width:17.2%; 
    padding-top:17.2%; 
    margin-left:0.5%; 
}

來源

2016-11-08 07:14:49 kdyz

響應式設計佈局

回答

相關問題