iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
Modern Web

30天打造品牌特色電商網站系列 第 9

30天打造品牌特色電商網站 Day.9 RWD響應式設計介紹

哈囉~很快的已經來到了第九天,前面帶給大家都是一些網頁的基礎,後面會針對各種主題有更深入的探討喔,今天要介紹的是響應式設計的設計重點,也是電商網站很需要重視的一部分!

什麼是響應式設計(RWD)呢?

它是一種網頁的設計方法,目的是要讓網頁能夠適應不同的平台,隨著視窗寬窄的改變去調整網頁的佈局,不管是在電腦、平板、手機都可以很好的做呈現,給使用者優質的瀏覽體驗。

該如何開始做響應式設計

  1. 確定網頁的用途、使用者族群,可以更好掌握哪種裝置的使用者較多。
  2. 訂出幾種版本的排版樣式(電腦、平板、手機等)。
  3. 確定好後開出對應尺寸的版面,以及考慮順序。

開始做設計的順序,一般建議從小螢幕(mobile)開始思考,以最小的範圍開始做排版,把重要的資訊先放進去,之後在大螢幕(desktop)上再一步步把元素加進來,可以避免由大至小資訊量過多、排版過雜的問題。當然如果使用者主要會是在電腦上使用,那就考慮大螢幕多一點,如果主要是在行動裝置上,就更著重於小螢幕上的設計。

媒體查詢( media qurey )
媒體查詢其實就是一個篩選器,你可以利用它來幫助你篩選不同的設備,去套上對應設備的樣式,這邊主要跟大家分享在CSS裡面的用法。

主要寫法有兩種:由小到大&由大到小

由小到大

  • 優先考慮手機排版,再依序做平板、電腦
  • @media 使用min-width寫法

min-width的意思是指,當最小寬度 >(斷點數字)px 時,就套用裡面的 CSS 語法

@media(min-width: (斷點數字)px){ 
 //條件下的樣式設定
}

由大到小

  • 優先考慮電腦排版,再依序做平板、手機
  • @media 使用max-width寫法

max-width的意思是指,當最大寬度 < (斷點數字)px 時,就套用裡面的 CSS 語法

@media(max-width: (斷點數字)px) {
 //條件下的樣式設定
}

常見的斷點設置
以下是比較常見的斷點,可以依個別需求去設置,只要滿足主要的幾個斷點,其他比較針對特定設備的優化也可以先查詢規格再去添加。

  1. 針對於小型的行動裝置 (<320px)
  2. 針對於智慧型手機設置,寬度是小於480px (<480px)
  3. 針對於高智能行動裝置,比如Ipads,寬度是小於768px (<768px)
  4. 針對於大設備,比如PC端,寬度是大於768px (>768px)
  5. 添加適用於平板設備的斷點,大於768px小於1024px (>768px 和 <1024px)
  6. 針對於較寬的螢幕裝置,大於1024px (>1024px)

上一篇
30天打造品牌特色電商網站 Day.8 CSS基礎
下一篇
30天打造品牌特色電商網站 Day.10 CSS框架-Bootstrap5
系列文
30天打造品牌特色電商網站30

尚未有邦友留言

立即登入留言