標籤：lines css解決 需求分析 版本號碼 移動端 http leo 效果 color
純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>* {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實現移動端常見布局——高度和寬度掛鈎的秘密
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
