用css實現自適應正方形

用css實現自適應正方形

不多說，直接上**，本文章一共例舉了3種方案

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>css實現自適應正方形
title
>
<
style
>
/*使用padding-bottom實現正方形
*/.square1 
.square2 
.square3
.square3:after 
style
>
head
>
<
body
>
<
div 
class
="square1"
>使用padding-bottom實現正方形
div>
<
div 
class
="square2"
>使用css3單位vw實現正方形
div>
<
div 
class
="square3"
>使用偽類margin
CSS實現自適應正方形
在處理移動端頁面時，我們有時需要將banner圖做成與螢幕等寬的正方形以獲得最佳效果。方案一 css3 vw單位 css3中新增了一組相對於可視區域百分比的長度單位 vw,vh,vmin,vmax。vw是相對於視口寬度的百分比，1vw 1 viewport width vh是相對於視口高度的百分比，...
純css實現自適應正方形
在處理移動端頁面時，我們有時會需要將banner圖做成與螢幕等寬的正方形以獲得最佳的體驗效果，如flipbord的移動頁面 方案一 css3 中新增了一組相對於可視區域百分比的長度單位 vw,vh,vmin,vmax。其中 vw 是相對於視口寬度百分比的單位，1vw 1 viewport width...
Css實現自適應螢幕寬度的正方形
思路，正方形，長寬都一樣，需要找到乙個標準值然後再去設定盒子模型，可以用padding，margin,width height,正題開始 1.使用padding，原因，百分比是基於父元素的寬度，所以如果是根據父盒子的百分比來算，則可以使用這個方法 具體 如下 class square div squ...