高度随宽度适应的响应式方案
生活随笔
收集整理的這篇文章主要介紹了
高度随宽度适应的响应式方案
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
概述
高度隨寬度自適應有很多種方案，這里只討論一種巧妙的方案，就是利用margin/padding。我把代碼記錄下來供以后開發時參考，相信對其他人也有用。
知識點
margin/padding有這么一個很巧妙的知識點：當margin/padding取形式為百分比的值時，無論是left/right，還是top/bottom，都是以父元素的width為參照物的！
自適應方案一
那么可以使用padding-bottom/top來實現自適應方案一，代碼如下：
<!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>然而這個代碼有一個缺點，就是無法設置max-height。原因是它的height是0，它是靠padding撐起來的，但是padding不屬于height。所以我們有如下方案二。
自適應方案二
可以使用margin-bottom/top來實現自適應方案二，代碼如下：
<!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起了作用。
填充內容
由于沒有規定高度，那么向其中填充內容勢必會占據一定的空間從而影響高度。所以這個時候一般利用絕對定位來向其中填充內容。
轉載于:https://www.cnblogs.com/yangzhou33/p/9175651.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的高度随宽度适应的响应式方案的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 新手看看如何发布一个网站
- 下一篇： linux学习-----开机启动项设置，