响应式网页中，如何只用CSS实现div的高和宽保持固定比例

引言：

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

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

>>>>>>>>>>>>>>>demo1请点击<<<<<<<<<<<<<<

正文：

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)百分比为何以最近的块级祖先元素的宽度而不是高度作计算？】