甚麼是RWD

RWD是指Responsive Web Design，翻譯成響應式網頁設計，他的意思就是會根據畫面的條件呈現不同結果，例如在電腦上是一個樣子，在手機上是一個樣子，在平版上又是一個樣子，那該怎麼做這樣的設計，目前主要都是透過CSS技術來達成，在CSS語法中指定螢幕寬度來決定要用甚麼方式呈現，一般大都會分為

• PC：寬度在768px以上一般都會被當成PC
• 平板：一般是指寬度在768px以內的螢幕
• 手機：一般是指寬度在360px以內的狀況，不過大都會讓手機和平板設計一樣，所以分介一般式在768px

所以我們會在CSS中針對寬度作設定，下面是個範例

@media only screen and (max-width: 768px) {
display: block;
}
@media only screen and (max-width: 480px) {
display: flex;
}
@media only screen and (max-width: 320px) {
display: inline-flex;
}

上面這一段就是分別對不同的寬度作不同的dispay風格作設定，不過這只是個小範例，如果你沒用過CSS，看不懂是正常的，只是讓你知道程式設計師平常條畫面時大概是在幹嘛，而且真正的CSS調整不會是單純這樣的格式，比較可能像下面這個樣子，他的目的是把一張底圖放進某個區塊

@media screen and (max-width: 768px)
#banner_toolbar .logo {
height: 0;
width: 0vw;
background: url(/logo-phone.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
object-fit: contain;
}

我要在那邊一個一個解析度設定真的很麻煩，那有簡單一點的方法嗎？當然有，大家比較常用的是Twitter Bootstrap，他提供一個網格系統，他把電腦平板和手機都分成12格，這樣我可以自己決定這邊要幾格那邊要幾個，不用自己去記憶那些解析度，他將畫面分成四種

• xs: <768px
• sm: >=768px
• md: >=992px
• lg: >=1200px

這個概念就比較簡單了，一般的畫面就是md，手機是xs，如果硬要再細分才會用到sm和lg，這樣就可以輕易地將RWD設計好，讓所有的原件都變成一個一個的格子拼湊出來，寬度夠大才一次顯示多個元件，寬度不夠就一次顯示一個元件就好，網格(Grid)系統可以看Bootstrape官網的下圖範例就可以了解了

透過RWD技術，可以讓畫面呈現根據畫面大小來調整，例如Bootstrap官網的這個例子

只要畫面變小就會變成

利用框架來開發的話就可以很快地開發好這種效果，但如果用基本的CSS也是可以，但會需要多一點程式碼來達成，因此建議可以使用一些框架來處理RWD。