響應式網頁中，如何只用CSS實現div的高和寬保持固定比例

 

引言：

 

如果div里是<img>，原生就支持。

 

1. .item img {
2.     float: left;
3.     margin:5%;
4.     width: 20%;
5. }

 

>>>>>>>>>>>>>>>demo1請點擊<<<<<<<<<<<<<<

 

正文：

 

1、使用媒體查詢。

 

1. @media only screen and (min-width: 100px) and (max-width: 640px) {
2.    div{
3.       width: 100px;
4.       height: 100px;
5.    }
6. }
7. @media only screen and (min-width: 641px) and (max-width: 789px) {
8.    div{
9.       width: 200px;
10.       height: 200px;
11.    }
12. }

 

2、利用padding-bottom是百分比值的話，參考的是父元素的width而不是height。

 

1. .item {
2.     float: left;
3.     background-color: darkslategrey;
4.     border: 1px solid black;
5.     margin: 5%;
6.     width: 20%;
7.     height: 0;
8.     padding-bottom: 20%;
9. }

 

>>>>>>>>>>>>>>>demo2請點擊<<<<<<<<<<<<<<

 

3、使用vw屬性，他是參考整個viewport（視窗）的寬度【vw、vh、vmin、vmax是css3新屬性，支持主流瀏覽器且IE10以上】

 

1. .item {
2.     float: left;
3.     background-color: darkslategrey;
4.     border: 1px solid black;
5.     margin: 5%;
6.     width: 20vw;
7.     height: 20vw;
8. }

 

>>>>>>>>>>>>>>>demo3請點擊<<<<<<<<<<<<<<

 

參考資料：

【CSS中margin-top/bottom(padding-top/bottom)百分比為何以最近的塊級祖先元素的寬度而不是高度作計算？】