CSS实现自适应浏览器宽度的正方形

CSS实现自适应浏览器宽度的正方形有如下三种方法：

一、方案一：CSS3 vw 单位

CSS3 中新增了一组相对于可视区域百分比的长度单位vw、vh、vmin、vmax。其中vw是相对于视口宽度百分比的单位，1vw = 1% viewport width，vh是相对于视口高度百分比的单位，1vh = 1% viewport height；vmin是相对当前视口宽高中较小的一个的百分比单位，同理 vmax是相对当前视口宽高中较大的一个的百分比单位。

1. #square{  
2.     width:30%;  
3.     height:30vw;  
4.     background:red;  
5. }  

类比：纯CSS实现自适应浏览器高度的正方形只须要设置width的单位为vh便可。

优势：简洁方便。

缺点：浏览器兼容很差。

 

二、方案二：设置垂直方向的padding撑开容器

因为margin, padding 的百分比数值是相对父元素的宽度计算的，只需将元素垂直方向的一个padding值设定为与width相同的百分比就能够制做出自适应正方形了。

但要注意，仅仅设置padding-bottom是不够的，若向容器添加内容，内容会占据必定高度，为了解决这个问题，须要设置height: 0。

1. #square{  
2.     width:30%;  
3.     height:0;  
4.     padding-bottom: 30%;  
5.     background:red;  
6. }  

优势：简洁明了，且兼容性好。

缺点：会致使在元素上设置的max-width属性失效（max-height不收缩）。

 

三、利用伪元素的 margin(padding)-top 撑开容器

max-width属性失效的缘由是：max-width属性只限制于width，也就是只会对元素的 content width起做用。

解决方法是：用一个子元素撑开content部分的高度，从而使max-height属性生效。

首先须要设置伪元素，其内容为空，margin-top设置为100%。

但要注意，若使用垂直方向上的margin撑开父元素，仅仅设置伪元素是不够的，这涉及到margin collapse外边距合并的概念，因为容器与伪元素在垂直方向发生了外边距合并，因此撑开父元素高度并无出现，解决方法是在父元素上触发BFC：设置overflow:hidden。

1. #square{    
2.     width:30%;    
3.     background:red;  
4.     overflow:hidden;    
5.     max-width:200px;  
6. }    
7. #square:after{    
8.     content: '';    
9.     display: block;    
10.     margin-top:100%;    
11. }    

若使用垂直方向上的padding撑开父元素，则不须要触发BFC。

1. #square{  
2.     width:30%;  
3.     background:red;  
4.     max-width:200px;  
5. }  
6. #square:after{  
7.     content: '';  
8.     display: block;  
9.     padding-top:100%;  
10. } 

注：以上方法都是相对视口宽度自适应的正方形。若是需求是制做相对视口高度自适应的正方形，估计就只能使用 vh 单位了吧~