文/Jack同學(xué)
現(xiàn)在響應(yīng)式布局越來(lái)越重要，適應(yīng)多終端多設(shè)備要求也越來(lái)越多骂澄。自適應(yīng)元素在開(kāi)發(fā)過(guò)程中經(jīng)常碰到吓蘑，下面寫(xiě)一個(gè)常用到的自適應(yīng)方塊的寫(xiě)法。
我們?cè)陂_(kāi)發(fā)過(guò)程中經(jīng)常使用百分比來(lái)自適應(yīng)元素坟冲。
- 請(qǐng)看結(jié)構(gòu)：
<body>
<div class="wrapper">
<div class="box"></div>
</div>
</body>
- 接著樣式：
html,body {
width:100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
}
.box {
width: 30%;
height: 30%;
border: 1px solid red;
}
- 這樣我們得到如圖：
不是方塊
-由于設(shè)備的寬高不定磨镶，設(shè)置百分比顯然得不到想要的方形，如果固定寬高又達(dá)不到自適應(yīng)的要求健提。
- 下面這個(gè)方法可以解決這個(gè)問(wèn)題琳猫。
html,body {
width:100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
}
.box {
width: 30%;
height: 0;
padding-top: 30%;
border: 1px solid red;
}
-
如圖：
自適應(yīng)方塊 上面我把元素的
height設(shè)置為0，padding-top設(shè)置為30%私痹，從而得到想要的脐嫂，為什么呢？難道padding-top是相對(duì)于自身寬度來(lái)設(shè)置的嗎紊遵？其實(shí)原因確實(shí)是相對(duì)與寬度設(shè)置的账千，但不過(guò)是相對(duì)于父級(jí)的寬度設(shè)置的，所以子級(jí)的橫向和縱向距離永遠(yuǎn)相等暗膜，并且設(shè)置的是百分比匀奏，也同樣自適應(yīng)。
這樣一個(gè)自適應(yīng)方塊就完成了桦山，同樣的給元素設(shè)置
border-radius: 50%;也會(huì)得到一個(gè)自適應(yīng)圓攒射。
