響應式網頁(Responsive Web Design)實作筆記

響應式網頁(Responsive Web Design)實作筆記

響應式網頁(Responsive Web Design)是一種設計概念,希望能讓網頁適用在不同的平台上。公司最近想對產品大改版,於是又來練練 RWD 摟!

設計與實作

第一步:設計三個版面架構

做三種尺寸的版面,分別是

第二步:使用 Media Query 撰寫 CSS

這次並不會使用 Grid System,而是單純使用 CSS 的 Media Query。而在撰寫 CSS 的部份,如果是共通、可以共用的,我會放在 Common 的區塊,而其他針對特定尺寸的指令,便分別放在單獨的區塊裡,例如:

/* 超過 768px */
@media screen and (min-width: 768px) {
  ...
}

/* 介於 480px 與 767px 之間 */
@media screen and (min-width: 480px) and (max-width: 767px) {
  ...
}

/* 未滿 480px,即 479px 以下 */
@media screen and (max-width: 479px) {
  ...
}

Demo

前天剛好跟一位在做餐飲的朋友吃飯,就用「食物」來當成這次實作網站的主題吧!Demo 網站 Food Sense

PC

響應式網頁(Responsive Web Design)實作筆記

Tablet

響應式網頁(Responsive Web Design)實作筆記

Mobile

響應式網頁(Responsive Web Design)實作筆記

後記

之前常有人提到,RWD 是有助於 SEO 的,可參考 4 SEO Benefits of Responsive Web Design。一來是網址統一,不浪費 link juice,另一方面是因為提高可閱讀性而降低網站的跳出率。但對於擁有複雜流程的網站而言,希望用一個版本的 HTML 再搭配不同的 CSS,而能適應 PC、平板、手機是困難的,因為流程與功能複雜,勢必會有流程變動或功能增減,所以可能的解法就是判斷平台或解析度,然後轉跳到不同的頁面。因此就演變成作兩個版本的 HTML - PC + 行動裝置(平板與手機)。但若決定做一個以上的版本的頁面,就需要考慮維護成本了。

推薦閱讀

好用的測試網站


這篇文章的原始位置在這裡-RWD (Responsive Web Design) 實作筆記

由於部落格搬遷至此,因此在這裡放了一份,以便閱讀;部份文章片段也做了些許修改,以期提供更好的內容。
comments powered by Disqus