Отзывчивый макет дизайна

Я стараюсь, чтобы мои divs реагировали. Я создал divs с width:100%; и max-width: xx px;, но это не будет reponsive при изменении размера браузера. Кто-нибудь может мне помочь?Отзывчивый макет дизайна

DEMO страница.

.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'' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '. –

@priya_singh Спасибо за ваш ответ. Он работает нормально, но могу ли я задать вам один вопрос о дополнении. Вы можете видеть, что заполнение не изменяется при изменении размера, оно почти остается «padding-top: 385px;» и «padding-top: 190px;», поэтому мы можем сделать это также отзывчивым? – Azzo

@DevStud Да. ты можешь. Я просто управляю шириной. Чтобы сделать его полностью отзывчивым, вы должны попробовать прописку и маржу с%. –

Использование точек не будет изменять размер дивы динамически в отличие, как другие единицы бы.

Пробуйте использовать относительные единицы. Образец этих чувствительных единиц - это% 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

Отзывчивый макет дизайна

ответ

Смежные вопросы