單純的說明Responsive Web Design，或是簡稱RWD
簡單的來說就是適應裝置螢幕大小的寬度來做設計的一種手法就是，最明顯的應該是使用Chrome或Firefox將網頁視窗的寬度縮小時，內容會一同連動縮排的手法就是
先看DEMO Code，裡面大部份CSS的都有注解了，使用手機或Chrome或Firefox應該都可見其效果，變更寬度時會隨即變更內容
這邊不用JavaScript，只需要CSS即可…然而實作必須要會手刻CSS並瞭解CSS的真義(語意與作用，網路教學很多)，與覆蓋的手法，如果不知道覆蓋手法，可參考下面這篇寫得很棒的
之後大概就是設定與攥寫順序的部分…個人認為只要一層一層包下去即可…這樣也不用寫太多的語法(類似用range定義…維護會增加複雜性)，當然也有人認為網頁開發要先用mobile-device的思考為起點的方式，那就又是另外一種思維方向就是了
使用RWD必須要對HTML的視界(view)進行設定，基本上在HTML的<head>內加上這行即可
<meta name="viewport" content="width=device-width, initial-scale=1"/>
當然其中細節很多，可以另外自己去查詢，不過基本上都用這行就可以了
之後是CSS的結構順序，你必須寫一個完整版的網頁出來，也就是可以上線的Layout後，才開始進行RWD的動作，類似
<style>
\* 首先定義完整的一般Layout，通常看是浮動寬度還是類似1000px的固定寬度*\
……
\* 一般Layout定義完畢 *\
@media all and (max-width: 980px){
\* 這邊定義如果視窗縮放到小於980px寬的時候
你的layout必須要修改CSS的地方
例如把.wap設定為width:100%來讓其跟隨寬度變動等*\
}
@media all and (max-width: 626px){
\* 同上，寬度626px *\
}
@media all and (max-width: 480px){
\* 同上，寬度480px *\
}
</style>
大概是這樣的意思，所以就縮縮縮(用Chrome或Firefox縮小視窗的寬度)…然後看到破版或是不合邏輯就定義，這樣一下就可以寫出符合所有寬度的網頁
然而縮小的過程中，並不是所有的內容都要顯示，例如側邊欄的廣告或贊助廠商，授權和說明內容，大的橫幅圖片式廣告與公告等等，縮小的過程中一一隱藏來讓畫面保持簡潔與可讀性
當然另外一派的思維就完全相反，就定義一個最小的Layout開始，然後慢慢放，缺點會是…IE系列支援困難(不支援viewport和@media語法)，攥寫困難…所以我這邊推薦此方式就是
沒有留言:
張貼留言