RWD響應式設計的製作特點

Author: Locust
Responsive web design


本篇文章比較偏技術說明,如果您想了解可以參考看看。


什麼是RWD網頁設計?

RWD (Responsive web design) 響應式設計,是因應市面上多種行動裝置而產生的網頁新技術,簡單來說就是讓一個網頁,不論在何種裝置上,都能讓使用者容易瀏覽內容,其中製作時需包含了以下三個特點:Fluid Grid Fiexible ImagesCSS3 media queries
〈延伸閱讀:什麼是RWD? RWD跟AWD有什麼不同?
〈延伸閱讀:SEO架構的網頁設計,SEO成功率才會高

 

流動式佈局Fluid Grid、有彈性的圖片Fiexible ImagesCSS3 media queries

把網站的版面,以表格的方式理解,每個網站都會有不同的表格(區塊),在不同的裝置大小下,自動的變動相關區塊以符合瀏覽大小。

 

而其中要考慮的,不但是版面變動後的區塊變動,連同寬度、文字間距、圖片大小、字型大小、字體等,凡是網站上看的到的元素,都需要依縮小後的版面去進行調整,進行不同的CSS設定,聽起來簡單,但實際上網站設計師及視覺設計師的工作可因此要多花上許多時間,考慮的細節之多,若是沒有多年的經驗實在很難面面俱到。

 

以下用幾個CSS作為範例簡單說明一下:

 

RWD的字體大小縮放

px為單位是我們一般習慣的,但在不同裝置下,隨著營幕像素大小不同,這時就可以改用rem為單位,以下是基本字體大小 1rem=10px 範例,至於為什麼還需要指定px,只因為IE6~8不支援rem

 

@media screen and (min-width: 769px) and (max-width: 1023px)

.technology-nav a { font-size: 13px; font-size: 1.3rem; }

 

使用769px~1023px瀏覽時,此連結的字體大小為13px1.3rem

 

RWD的間距位置控制

其中包含了網站內容,多媒體、圖片及文字的間距位置,當字體縮小後,文字間的距離也必需隨著變動,當畫面縮小後,不僅是區塊寬度,就連同間距都需要調整,瀏覽起來才不致於突兀。

 

@media screen and (max-width: 768px)
{ #logo { left: 20px; width: 120px; }

 

使用768px以內瀏覽時,logo這個區塊,左方間距設定為20px,區塊寬度為120px

 

@media screen and (max-width: 480px)

{ #banner .slick-wrap p { margin: 10px 0; }

 

使用480px以內瀏覽時,文字內容區塊邊界設定為10px

 

以上2點只是RWDCSS的冰山一角,更多的CSS語法設定,就留待實際製作網站時,交由專業的視覺設計師再一一去解決。

〈延伸閱讀:網頁設計收費行情? 如何選擇網頁設計公司?

 

RWD網站示意圖






(本文為達文西數位科技所有,轉載文圖請註明出處)

邁入網站與SEO工作已經超過20年,喜歡探索新知與研究技術,總是希望給您最適合的解決方案。

SEO套版網站,優惠 $ NT 62,000 (1年代管+SSL)

請與我們聯繫
線上客服 TOP