做響應式網頁，如何讓一個div的高和寬保持比例放大 縮小

1,方案一:響應式來做,可以根據媒體查詢,設定在不同屏幕寬度下div的高度和寬度,具體的設置看你響應式想怎么顯示

@media only screen and (min-width: 100px) and (max-width: 640px) {
div{
width: 100px;
height: 100px;
}
}
@media only screen and (min-width: 641px) and (max-width: 789px) {
div{
width: 200px;
height: 200px;
}
}

2.方案二:百分比來做,這里需要運用一個小技巧,padding用百分比做單位時是相對於容器的寬度來算的,所以你可以把高度設為0,內容自然溢出,設置個

padding-bottom
height:0;
width:50%;
padding-bottom:30%
那么這個div的高寬比就是30%:50%

常用的方法是通過背景圖標的cover屬性讓div的高度隨着寬度按比例縮放
　　

#banner .bd li {
width: 100%;
background-repeat: 
no-repeat;
background-size: cover;
background-position: center 
0;
background-position: 50% 50%;
-webkit-background-size: 
100%;
padding-top: 42%;
}