前言

上篇在移動(dòng)Web開發(fā)基礎(chǔ)-百分比+flex布局方案中說(shuō)到了比例盒子的實(shí)現(xiàn)，因?yàn)樵谝苿?dòng)端，需要適應(yīng)各種屏幕寬度的設(shè)備，所以我們的圖片以及其他一些元素需要根據(jù)屏幕寬度自適應(yīng)的等比例縮放，這里就需要用到比例盒子的布局方法。接下來(lái)讓我們一起來(lái)了解下實(shí)現(xiàn)比例盒子的幾種方法吧！

這里會(huì)介紹四種實(shí)現(xiàn)方式，分別是用css的vw單位，垂直方向的padding或者margin，以及因此產(chǎn)生的問(wèn)題而衍生的用偽元素實(shí)現(xiàn)的解決方法。

注意：按照規(guī)定，margin, padding 的百分比數(shù)值是相對(duì) 父元素寬度 的寬度計(jì)算的。

CSS 單位 VW

寬度高度都用同一個(gè)單位VW，其他比例也是相應(yīng)的計(jì)算元素寬高占屏幕寬度的百分比。

<div class="vw"></div>.vw{width: 20vw;height: 20vw;background-color: #000; }

垂直方向的padding+absolute

垂直方向的padding（padding-top/padding-bottom），因?yàn)槭怯胮adding撐開的，所以子元素會(huì)跑到區(qū)域外，所以該容器要相對(duì)定位，子元素一般全部絕對(duì)定位在里面。

//因?yàn)楸仨氁懈冈氐膶挾茸鳛橛?jì)算的參照，所以添加了一個(gè)容器， 開發(fā)時(shí)自己清楚父元素的寬度就行，一般父元素100%寬度比較方便計(jì)算。<div class="padding-wp"><div class="padding"></div> </div>.padding-wp{width: 20%; } .padding{position: relative;/* 子元素要絕對(duì)定位 */width: 100%;padding-top: 100%;max-height: 100px; /* 不起作用 */overflow: hidden;background-color: yellow; }

看到這里寫了max-height 不起作用，是因?yàn)?max-height 屬性只限制于 height，也就是只會(huì)對(duì)元素的 content height 起作用，那么我們是不是能用一個(gè)子元素?fù)伍_ content 部分的高度，從而使 max-height 屬性生效呢？于是我們就用偽元素的方式來(lái)實(shí)現(xiàn)。

垂直方向的padding+absolute+ :after

<div class="padding-wp-after"><div class="padding-after"></div> </div>.padding-wp-after{width: 20%; } .padding-after{position: relative;/* 子元素要絕對(duì)定位 */width: 100%;max-height: 100px; /* 起作用 */overflow: hidden;background-color: blue; } .padding-after:after{content: "";display: block;padding-top: 100%; }

這里我們就能看到max-height起作用了。

垂直方向的margin+absolute+ :after

<div class="margin-wp-after"><div class="margin-after"></div> </div>.margin-wp-after{width: 20%; } .margin-after{width: 100%;max-height: 100px; /* 起作用 */background-color: #000;overflow: hidden; } .margin-after:after{content: "";display: block;margin-top: 100%; }

這里用偽元素的margin-top來(lái)?yè)伍_了父容器的空間，但是會(huì)發(fā)現(xiàn)父容器多了一個(gè)屬性overflow: hidden;這是因?yàn)橐|發(fā)元素的BFC屬性，不然margin會(huì)有穿透的問(wèn)題。

總結(jié)

本文介紹了幾種實(shí)現(xiàn)比例盒子的方法，不對(duì)相信看完此文的你應(yīng)該也知道了以上方法的利弊，方法一的兼容性不言而喻，方法二會(huì)有max-height的問(wèn)題，方法四margin經(jīng)常會(huì)有穿透，重疊，對(duì)上下文影響比較大也不推薦，所以，你應(yīng)該猜到了，我推薦方法三！用偽元素以及定位的方法實(shí)現(xiàn)，如果你用了less/sass這樣的CSS預(yù)編譯語(yǔ)言，那你就可以寫一個(gè)比例盒子的混淆，方便在其他地方調(diào)用。比如

//等比例的盒子 @mixin liftSizeBox ($size:20%){&:after{display: block;content:"";padding-top:$size;}>.inner{position: absolute;width:100%;height: 100%;top:0;left:0;} }//背景圖實(shí)現(xiàn)的等比圖,默認(rèn)正方形 @mixin liftSizePic ($width:20%,$height:$width){width:$width;background-size:cover;background-position:center;&::after{content: "";display: block;padding-top:$height;} }

---

本文DEMO codepen地址 https://codepen.io/xiangshuo1992/pen/ZayEYZ

width="100%" height="400" scrolling="no" title="ZayEYZ" src="//codepen.io/xiangshuo1992/embed/ZayEYZ/?height=265&theme-id=0&default-tab=css,result&embed-version=2" allowfullscreen="true">See the Pen <a href="https://codepen.io/xiangshuo1992/pen/ZayEYZ/">ZayEYZ</a> by Luke.Deng (<a href="https://codepen.io/xiangshuo1992">@xiangshuo1992</a>) on <a href="https://codepen.io">CodePen</a>.&#10;

---

本文參考：
純 CSS 實(shí)現(xiàn)自適應(yīng)正方形

有興趣你還可以了解更多
CSS實(shí)現(xiàn)長(zhǎng)寬比的幾種方案

總結(jié)

以上是生活随笔為你收集整理的移动Web开发基础-比例盒子的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。