Responsive Web Design – Note07. 外觀設計模式(Layout shifter) - Benjamin Says So ......

字體：小中大

Responsive Web Design – Note07. 外觀設計模式(Layout shifter)

2014/06/16 14:40:07瀏覽465｜回應0｜推薦1

這一篇要介紹第三種外觀設計模式 —Layout shifter
這種Layout的設計模式，比較注重的在於content(內容)的變化，而不只是注意欄位上的流動、堆疊，與前兩個設計模式的差異，在維持內容上的變化會比較需要複雜一點的考量，而非只是以外觀那個 box做為思考的依據。也就是說，內容上的breakpoints的設定，是比較需花精神的。

範列(Layout shifter)

這個範例的CSS其實跟上個Column drop的CSS差異性並不大。因為這裡舉的範例都以box的模式來解釋，所以，有些細節的想法，可能還要更深入一點的內容或瞭解才會體會得更完全一些。本範例在瑩幕大的時候，左方呈現一個垂直的區塊，而右方則是兩個區塊堆疊起來。但當瑩幕縮小時，則會全數堆疊在一起。

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

@media (min-width: 600px) {
.div1 { width: 25%; }
.div4 { width: 75%; }
}

@media (min-width: 800px) {
.container {
width: 800px;
margin-left: auto;
margin-right: auto;
}
}

( 知識學習｜隨堂筆記 )