成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

joyqi / 2825人閱讀

摘要：如果需求是制作相對視口高度自適應(yīng)的正方形，估計(jì)就只能使用單位了吧轉(zhuǎn)自純實(shí)現(xiàn)自適應(yīng)正方形

在處理移動(dòng)端頁面時(shí)，我們有時(shí)會(huì)需要將 banner 圖做成與屏幕等寬的正方形以獲得最佳的體驗(yàn)效果，如 Flipbord 的移動(dòng)頁面：

那么應(yīng)該怎么使用純 CSS 制作出能夠自適應(yīng)大小的正方形呢？

方案一：CSS3 vw 單位

CSS3 中新增了一組相對于可視區(qū)域百分比的長度單位 vw, vh, vmin, vmax。其中 vw 是相對于視口寬度百分比的單位，1vw = 1% viewport width， vh 是相對于視口高度百分比的單位，1vh = 1% viewport height；vmin 是相對當(dāng)前視口寬高中 較小 的一個(gè)的百分比單位，同理 vmax 是相對當(dāng)前視口寬高中 較大 的一個(gè)的百分比單位。該單位瀏覽器兼容性如下：

利用 vw 單位，我們可以很方便做出自適應(yīng)的正方形：

  

.placeholder {
  width: 100%;
  height: 100vw;
}

實(shí)現(xiàn)效果

優(yōu)點(diǎn)：簡潔方便
缺點(diǎn)：瀏覽器兼容不好

方案二：設(shè)置垂直方向的 padding 撐開容器

在 CSS 盒模型中，一個(gè)比較容易被忽略的就是 margin, padding 的百分比數(shù)值計(jì)算。按照規(guī)定，margin, padding 的百分比數(shù)值是相對 父元素寬度 的寬度計(jì)算的。由此可以發(fā)現(xiàn)只需將元素垂直方向的一個(gè) padding 值設(shè)定為與 width 相同的百分比就可以制作出自適應(yīng)正方形了：

.placeholder {
  width: 100%;
  padding-bottom: 100%;
}

實(shí)現(xiàn)效果

這時(shí)一切看起來都很正常，我們試著給容器內(nèi)增加內(nèi)容：

咦？高度怎么溢出了？我們來看這時(shí)的盒模型：

如圖中所示，內(nèi)容區(qū)域占據(jù)了 38px 的高度。為了解決這個(gè)問題，我們可以設(shè)置容器的高度為 0：

.placeholder {
  height: 0;
}

這種方案簡潔明了，且兼容性好；但是除了填充內(nèi)容后會(huì)出現(xiàn)問題以外，還有可能碰上 max-height 不收縮：DEMO，于是第三種方案來了：

方案三：利用偽元素的 margin(padding)-top 撐開容器

在方案二中，我們利用百分比數(shù)值的 padding-bottom 屬性撐開容器內(nèi)部空間，但是這樣做會(huì)導(dǎo)致在元素上設(shè)置的 max-height 屬性失效：

而失效的原因是 max-height 屬性只限制于 height，也就是只會(huì)對元素的 content height 起作用。那么我們是不是能用一個(gè)子元素?fù)伍_ content 部分的高度，從而使 max-height 屬性生效呢？我們來試試：

.placeholder {
  width: 100%;
}

.placeholder:after {
  content: "";
  display: block;
  margin-top: 100%; /* margin 百分比相對父元素寬度計(jì)算 */
}

一刷新頁面，啊嘞？怎么什么也沒有？

這里就涉及到 margin collapse 的概念了，由于容器與偽元素在垂直方向發(fā)生了外邊距折疊，所以我們想象中的撐開父元素高度并沒有出現(xiàn)。而應(yīng)對的方法是在父元素上觸發(fā) BFC：

.placeholder {
  overflow: hidden;
}

注：若使用垂直方向上的 padding 撐開父元素，則不需要觸發(fā) BFC
實(shí)現(xiàn)效果

OK，父元素被撐起來了，我們再試一試設(shè)置 max-height：

完美！什么？你說元素內(nèi)部添加內(nèi)容時(shí)高度會(huì)溢出？來人，把這個(gè)叛徒拖出去喂狗！對于這樣的情況，可以將內(nèi)容放到獨(dú)立的內(nèi)容塊中，利用絕對定位消除空間占用。

結(jié)語

以上就是我目前所想到的三種制作自適應(yīng)正方形的方案，拋去 CSS3 中的視口相對單位，主要利用到 margin, padding 的百分比數(shù)值相對父元素寬度的寬度計(jì)算得出 來制作寬高相等、且相對視口寬度自適應(yīng)的正方形。如果需求是制作相對視口高度自適應(yīng)的正方形，估計(jì)就只能使用 vh 單位了吧~

轉(zhuǎn)自：純 CSS 實(shí)現(xiàn)自適應(yīng)正方形

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50797.html

相關(guān)文章

  • 純 CSS 實(shí)現(xiàn)自適應(yīng)正方形

    摘要：如果需求是制作相對視口高度自適應(yīng)的正方形，估計(jì)就只能使用單位了吧轉(zhuǎn)自純實(shí)現(xiàn)自適應(yīng)正方形 在處理移動(dòng)端頁面時(shí)，我們有時(shí)會(huì)需要將 banner 圖做成與屏幕等寬的正方形以獲得最佳的體驗(yàn)效果，如 Flipbord 的移動(dòng)頁面：showImg(https://segmentfault.com/img/bVNVjL?w=377&h=666); 那么應(yīng)該怎么使用純 CSS 制作出能夠自適應(yīng)大小的正...

    Freelander 評論0 收藏0

  • css自適應(yīng)正方形的方案

    摘要：網(wǎng)上搜羅的一個(gè)方法，利用代碼如下，不過本人木有實(shí)現(xiàn)成功，歡迎大家留言已實(shí)現(xiàn)成功的。并且這個(gè)方法兼容性目前來說還較差。所以放在最后一個(gè)，不太推薦，不過還是很好奇，這個(gè)東西是怎么實(shí)現(xiàn)的。 經(jīng)過搜索查找，總結(jié)幾種常用的css自適應(yīng)的正方形的解決方案： html代碼： 以下為幾種解決方案： 利用padding-bottom:100%撐開，如果無內(nèi)容可不設(shè)...

    syoya 評論0 收藏0

  • 巧用margin/padding的百分比值實(shí)現(xiàn)高度自適應(yīng)（多用于占位，避免閃爍）

    摘要：那想要優(yōu)化這一點(diǎn)，唯一的方法就是利用內(nèi)容高度來撐開而非，這個(gè)方案跟消除浮動(dòng)所用的方案非常相似給容器添加一個(gè)子元素偽元素，并把子元素偽元素的設(shè)為，使其實(shí)際高度相當(dāng)于容器的寬度，如此一來，便能把容器的高度撐至與寬度一致了。 一個(gè)基礎(chǔ)卻又容易混淆的css知識(shí)點(diǎn) 本文依賴于一個(gè)基礎(chǔ)卻又容易混淆的css知識(shí)點(diǎn)：當(dāng)margin/padding取形式為百分比的值時(shí)，無論是left/right，還是t...

    wenzi 評論0 收藏0

  • 【CSS練習(xí)】IT修真院--練習(xí)1-九宮格

    摘要：用于顯示日志信息及輸入一些命令請求監(jiān)聽?？色@得請求列表，點(diǎn)開某一項(xiàng)將看到數(shù)據(jù)頭部數(shù)據(jù)。包含本次請求的請求方法狀態(tài)碼請求服務(wù)器的地址其他一些設(shè)置響應(yīng)頭部包含用戶代理，幫服務(wù)器識(shí)別設(shè)備用預(yù)覽。 九宮格——用html+css制作一個(gè)網(wǎng)頁 一. 目標(biāo)效果： showImg(https://segmentfault.com/img/bVbbxBA?w=872&h=644); 二. 效果描述 圓角...

    Tecode 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<