何謂「RWD」響應式網站 (Responsive Web Design)?

「RWD」= Responsive Web Design,當然是有很多的中文名詞,響應式網站、自適應式網站、回應式網站…等,或許在網路上會有需多不少文章解釋,何謂「RWD」響應式網站,可是都有太多的專有名詞,我想這都不重要,主要是為什麼會有這技術的出現呢?

是因為為了「跨平台」,講這些是不是還是太過專業了,就是目前生活中,從電腦、手機、平板的出現,但卻因為各裝置的尺寸有差異,為了要符合觀看的寬度,因為大家的使用習慣只有上下觀看,卻不習慣去左右觀看,或許在網路上會有需多不少文章解釋,何謂「RWD」響應式網站,可是都有太多的專有名詞,就來簡單的去說明一下吧。

Responsive Web Design
↑ Responsive Web Design

以前只要針對「電腦」來去做設計網站,可是手機和平板的普及,當然科技始終來自於人性,一開始許多網站會設計二個版本的網站,都會看到「電腦版」、「手機版」的連結文字出現,比較人性化的就會用程式去判斷 使用者是用什麼裝置來看網頁,就會選擇進入的頁面,可是許多網站在設計上其實只針對寬度做了一個固定的設計,但之後卻有更大螢幕的手機和平板的出現,但要真正的去做到「RWD響應式網站」就是從CSS來做加強,而不是從HTML網頁了,簡單的分析:

做法一:電腦版設計一個網站、手機版設計一個網站,講直接一點就是做二個網站,寬度不同而以。

做法二:只有一個網站,但透過CSS來寫入好幾種判斷寬度語言。

 

那要去說什麼方式比較好呢,其實還是要知道需求之後,才能去看用什麼做法比較可以符合需求了。因為可能客戶想要做的樣式介面,是 RWD響應式網站 無法做的,那就只能選擇製作「電腦版」、「手機版」的二種網站了。

 

2018年8月21日

經過好多年之後,RWD響應式網站設計也越來越成熟了,當然 阿橙 在前端設計也越來越上手了,也做了不少大型的網站專案,也發現好久沒來寫新文章了,看到這一篇文章時,就來補充內容,在前端介面的開發上善用 CSS的尺寸判斷 就能做出一個頁面 能有各式各樣的排版變化。

阿橙

熱愛在網路上分享所學的知識,從美工設計、網頁設計、網路行銷、社群行銷、SEO、內容行銷、網路廣告行銷,不斷學習與自我成長,樂在學習。

One thought on “何謂「RWD」響應式網站 (Responsive Web Design)?

  1. 您好,請問一下:

    WAMP,就是架站綜合包,可以「安裝」,也可以「portable可攜式」,請問,這兩個差在哪?網路上都找不到答案耶!請多講一點,越詳細越好,感恩不盡!

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

驗證問答