高度随宽度适应的响应式方案
生活随笔
收集整理的這篇文章主要介紹了
高度随宽度适应的响应式方案
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
概述
高度隨寬度自適應(yīng)有很多種方案，這里只討論一種巧妙的方案，就是利用margin/padding。我把代碼記錄下來供以后開發(fā)時(shí)參考，相信對其他人也有用。
知識點(diǎn)
margin/padding有這么一個(gè)很巧妙的知識點(diǎn)：當(dāng)margin/padding取形式為百分比的值時(shí)，無論是left/right，還是top/bottom，都是以父元素的width為參照物的！
自適應(yīng)方案一
那么可以使用padding-bottom/top來實(shí)現(xiàn)自適應(yīng)方案一，代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .div {width: 50%;background-color: green;padding-top: 70%; } </style> </head> <body><div class="div"></div> </body> </html>然而這個(gè)代碼有一個(gè)缺點(diǎn)，就是無法設(shè)置max-height。原因是它的height是0，它是靠padding撐起來的，但是padding不屬于height。所以我們有如下方案二。
自適應(yīng)方案二
可以使用margin-bottom/top來實(shí)現(xiàn)自適應(yīng)方案二，代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .div {width: 50%;background-color: green;overflow: hidden; //形成BFC，不影響外面的元素max-height: 300px; } .div:after {content: '';display: block;margin-top: 50%; } </style> </head> <body><div class="div"></div> </body> </html>可以看到，max-height起了作用。
填充內(nèi)容
由于沒有規(guī)定高度，那么向其中填充內(nèi)容勢必會占據(jù)一定的空間從而影響高度。所以這個(gè)時(shí)候一般利用絕對定位來向其中填充內(nèi)容。
轉(zhuǎn)載于:https://www.cnblogs.com/yangzhou33/p/9175651.html
《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的高度随宽度适应的响应式方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 新手看看如何发布一个网站
- 下一篇： linux学习-----开机启动项设置，