纯CSS实现移动端常见布局——高度和宽度挂钩的秘密
純CSS實現移動端常見布局——高度和寬度掛鉤的秘密
不踩坑不回頭.之前我在一個項目中大量使用css3的calc計算屬性.寫代碼的時候真心不要太爽啊…可是在項目上線之后,才讓我崩潰了,原因非常easy,在低于安卓4.4的版本號的手機上,自帶的瀏覽器是不支持這個屬性的.
好吧,這還不時最坑爹的,在國產的獵豹瀏覽器以及其它一些瀏覽器里面,有可能也不支持.總而言之,這個坑踩大了.只是沒關系,大部分的常見布局問題,我都能解決掉.可是,以下這個….我真心有點費解.只是,沒關系,通過我的研究,終于還是非常快用CSS攻克了.
須要的效果,例如以下圖:
需求分析
看圖,事實上非常easy.假設寬度是固定的,那么這個布局就不要太簡單了.
問題是,設備的寬度是不固定的哦,那么問題就是,在不知道詳細寬度的時候,怎樣來設定它相應的高度呢?
也就是說,怎樣在CSS中,找到一個高度和寬度掛鉤的屬性.僅僅要存在這個參數,那么,問題就能解決.
那么有沒有這個參數呢?
有的.那就是padding
代碼實踐
普通情況下,是想不起來padding有這個特性的.只是,想起來了,那么這個問題就迎刃而解了,看代碼吧.
HTML結構
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> </head> <body><div class="box1"></div><div class="box2"></div><div class="box3"></div> </body> </html>CSS代碼
* {margin: 0;padding: 0;} .box1 {width: 50%;padding-bottom: 50%;float: left;background: #123;} .box2 {width: 50%;padding-bottom: 25%;float: right;background: #234;} .box3 {width: 50%;padding-bottom: 25%;float: right;background: #345;}總結
對于常見的CSS參數,你可能非常難知道里面的一些好玩的東西,或者看到了也熟視無睹.
在我們遇到一些問題的時候,尤其是布局這樣的問題,我們要考慮的是,能不能用CSS解決,而不時一位的去考慮JS.畢竟,JS是用來交互的,而CSS是用來布局的.
FungLeo原創,轉載請保留版本號申明,以及首發地址:http://blog.csdn.net/fungleo/article/details/50811589
總結
以上是生活随笔為你收集整理的纯CSS实现移动端常见布局——高度和宽度挂钩的秘密的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ASP.NET Core应用的错误处理[
- 下一篇： 网页设计DIV+CSS——第7天:CSS