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 單位了吧~