天天看點

【CSS3】響應式布局的實際應用的小例子

如今響應式布局在web app開發中應用得非常廣泛,現在的手機螢幕的分辨率基本在320px到640px之間,在窄屏和寬屏我們的顯示方式可能會略有不同。本文簡單介紹一個應用得非常多的小例子。

當螢幕寬度大于640px時,顯示6列選項,當小于640px時顯示兩排,每排3列,這種樣式在web app裡的很多選項的樣式中應用得很廣泛。

【CSS3】響應式布局的實際應用的小例子
【CSS3】響應式布局的實際應用的小例子

其實實作上面的效果很簡單,主要通過css3的媒體查詢和calc()屬性來對算術表達式求值就可以做到,具體實作可以檢視以下源代碼: