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

响应式网页中，如何只用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. }