响应式网页中，如何只用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)百分比为何以最近的块级祖先元素的宽度而不是高度作计算？】