甚麼是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...