div等比例縮放-------純CSS實現自適應瀏覽器寬度的正方形

摘自：https://blog.csdn.net/u010513603/article/details/78200207

1、方案一：CSS3 vw 單位

CSS3 中新增了一組相對於可視區域百分比的長度單位vw、vh、vmin、vmax。其中vw是相對於視口寬度百分比的單位，1vw = 1% viewport width，vh是相對於視口高度百分比的單位，1vh = 1% viewport height；vmin是相對當前視口寬高中較小的一個的百分比單位，同理 vmax是相對當前視口寬高中較大的一個的百分比單位。

#square{  
    width:30%;  
    height:30vw;  
    background:red;  
}  

類比：純CSS實現自適應瀏覽器高度的正方形只需要設置width的單位為vh即可。

優點：簡潔方便。

缺點：瀏覽器兼容不好。

 

2、方案二：設置垂直方向的padding撐開容器

由於margin, padding 的百分比數值是相對父元素的寬度計算的，只需將元素垂直方向的一個padding值設定為與width相同的百分比就可以制作出自適應正方形了。

但要注意，僅僅設置padding-bottom是不夠的，若向容器添加內容，內容會占據一定高度，為了解決這個問題，需要設置height: 0。

#square{  
    width:30%;  
    height:0;  
    padding-bottom: 30%;  
    background:red;  
}  

優點：簡潔明了，且兼容性好。

缺點：會導致在元素上設置的max-width屬性失效（max-height不收縮）。

 

3、利用偽元素的 margin(padding)-top 撐開容器

max-width屬性失效的原因是：max-width屬性只限制於width，也就是只會對元素的 content width起作用。

解決方法是：用一個子元素撐開content部分的高度，從而使max-height屬性生效。

首先需要設置偽元素，其內容為空，margin-top設置為100%。

但要注意，若使用垂直方向上的margin撐開父元素，僅僅設置偽元素是不夠的，這涉及到margin collapse外邊距合並的概念，由於容器與偽元素在垂直方向發生了外邊距合並，所以撐開父元素高度並沒有出現，解決方法是在父元素上觸發BFC：設置overflow:hidden。

#square{    
    width:30%;    
    background:red;  
    overflow:hidden;    
    max-width:200px;  
}    
#square:after{    
    content: '';    
    display: block;    
    margin-top:100%;    
}   

若使用垂直方向上的padding撐開父元素，則不需要觸發BFC。子元素的100%就相當於父元素的30%

#square{  
    width:30%;  
    background:red;  
    max-width:200px;  
}  
#square:after{  
    content: '';  
    display: block;  
    padding-top:100%;  
}