纯CSS实现移动端常见布局——高度和宽度挂钩的秘密
純CSS實(shí)現(xiàn)移動(dòng)端常見布局——高度和寬度掛鉤的秘密
不踩坑不回頭.之前我在一個(gè)項(xiàng)目中大量使用css3的calc計(jì)算屬性.寫代碼的時(shí)候真心不要太爽啊…可是在項(xiàng)目上線之后,才讓我崩潰了,原因非常easy,在低于安卓4.4的版本號(hào)的手機(jī)上,自帶的瀏覽器是不支持這個(gè)屬性的.
好吧,這還不時(shí)最坑爹的,在國產(chǎn)的獵豹瀏覽器以及其它一些瀏覽器里面,有可能也不支持.總而言之,這個(gè)坑踩大了.只是沒關(guān)系,大部分的常見布局問題,我都能解決掉.可是,以下這個(gè)….我真心有點(diǎn)費(fèi)解.只是,沒關(guān)系,通過我的研究,終于還是非常快用CSS攻克了.
須要的效果,例如以下圖:
需求分析
看圖,事實(shí)上非常easy.假設(shè)寬度是固定的,那么這個(gè)布局就不要太簡單了.
問題是,設(shè)備的寬度是不固定的哦,那么問題就是,在不知道詳細(xì)寬度的時(shí)候,怎樣來設(shè)定它相應(yīng)的高度呢?
也就是說,怎樣在CSS中,找到一個(gè)高度和寬度掛鉤的屬性.僅僅要存在這個(gè)參數(shù),那么,問題就能解決.
那么有沒有這個(gè)參數(shù)呢?
有的.那就是padding
代碼實(shí)踐
普通情況下,是想不起來padding有這個(gè)特性的.只是,想起來了,那么這個(gè)問題就迎刃而解了,看代碼吧.
HTML結(jié)構(gòu)
<!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;}總結(jié)
對于常見的CSS參數(shù),你可能非常難知道里面的一些好玩的東西,或者看到了也熟視無睹.
在我們遇到一些問題的時(shí)候,尤其是布局這樣的問題,我們要考慮的是,能不能用CSS解決,而不時(shí)一位的去考慮JS.畢竟,JS是用來交互的,而CSS是用來布局的.
FungLeo原創(chuàng),轉(zhuǎn)載請保留版本號(hào)申明,以及首發(fā)地址:http://blog.csdn.net/fungleo/article/details/50811589
總結(jié)
以上是生活随笔為你收集整理的纯CSS实现移动端常见布局——高度和宽度挂钩的秘密的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ASP.NET Core应用的错误处理[
- 下一篇： 网页设计DIV+CSS——第7天:CSS