作家
字體：小 中 大 |
|
|
|
| 2014/06/13 16:03:48瀏覽342｜回應0｜推薦1 | |
| 從這一篇開始，要導入Responsive Web Design中外觀設計的模式，已經有一些建立好的外觀模式可用於跨桌上電腦或行動裝置，所以找到一個合適你需求的外觀設計模式，然後直接引用其概念，在開發上，或許會替您解決掉一些一開始的不知所措。
先來介紹第一個外觀的模式 — Mostly fluid。 顧名思義應該存在著一種流動的感覺。從下面這張圖來看頁面中的5個DIV框框。最左為大視窗時(大於800px)，中間介於800px與600px之間，而最右側的視窗是小於600px時的程現（整個堆疊起來）。整個畫面移動的模式，其實有像倒水的樣子。使用Mostly fluid模式設計優點是在多數這樣的結構，需要的breakpoints通常不多，所以所需的精神就會少一點。 
範列(Mostly fluid) 大概解釋一下範例的CSS定義吧。 在最小瑩幕下，每一個DIV會垂直的堆疊，而此時每個DIV的寬度會是width:100%；當視窗的大小介於600px到800px之間時，第一個DIV有width:100%，而2~4的都定義成50%。當視窗最大時，就60%、40%、33.33%、33.33%、33.33%的畫面組成了。 .div1, .div2, .div3, .div4, .div5 {width: 100%;} @media (min-width: 600px) { .div2, .div3, .div4, .div5 { width: 50%;} } @media (min-width: 800px) { .div1 {width: 60%;} .div2 {width: 40%;} .div3, .div4, .div5 {width: 33.33%;} } @media (min-width: 800px) { .container { width: 800px; margin-left: auto; margin-right: auto; } } Mostly fluid的外觀設計模式大致就是上頭這樣設定。各位有概念了嘛？ |
|
| ( 知識學習｜隨堂筆記 ) |
