Responsive Web Design – Note06. 外觀設計模式(Column drop) - Benjamin Says So ......

字體：小中大

Responsive Web Design – Note06. 外觀設計模式(Column drop)

2014/06/16 09:32:18瀏覽293｜回應0｜推薦1

這一篇要介紹第二種外觀設計模式 — Column drop
這是運用在多欄位的頁面設計，一般而言通常區分出來的欄位會是佔據整頁的概念，而且通常有一個較大主要顯著的區塊；它的用法，其實與Most fluid有些雷同也相去不遠，主要的差異會在於那個主要顯著的區塊，在瑩幕變化時，會希望讓它的變化小一點，以利前端的使用者可以比較注意這一個區塊。所以運用Column drop模式時，可能需要的breakpoints就會比在Most fluid模式下來得多一些。

範列(Column drop)

一樣來解釋一下CSS上的設計。
本篇的範例只用到了3個DIV，但在配合media queries時的breakpoints設定，卻細到每個DIV都可能有自己的設定。若用Most fluid模上，可能就會把各DIV的值的等比例去分了。所以，運用Column drop模式通常會配合內容來進行breakpoints的調校。在大於800px會將3個DIV分布到整頁，但第1個DIV會有最大的比例，而且會調到中間欄。在小於600px時，一樣像在Most fluid窄版時全都疊在一起，但會把第一個DIV再調放到最上面。

.div1, .div2, .div3 {
width: 100%;
}

@media (min-width: 600px) {
.div1{
width: 60%;
-webkit-order: 2;
order: 2;
}
.div2{
width: 40%;
-webkit-order: 1;
order: 1;
}
.div3 {
width: 100%;
-webkit-order: 3;
order: 3;
}
}

@media (min-width: 800px) {
.div2, .div3 {width: 20%;}
}

Column drop的外觀設計模式各位學起來了嘛？

( 知識學習｜隨堂筆記 )