[新手觀念] 什麼是 RWD
RWD 英文全名為 Responsive Web Design ，中文又可稱為【回應是網頁設計】、【自適應網頁設計】、【響應式網頁設計】。
RWD 是一種網頁技術，簡單的說，主要是讓網頁在不同的裝置上，能以不同解析度呈現，這樣能讓使用者有較好的預覽體驗。
如果你希望看看官方的說法，可以到 維基百科 回應是網頁設計觀看，下面我們會針對 RWD 從最開始的畫面規劃，到製作時你應該注意的細節，一一進行講解。
[新手觀念] RWD 基本設計概念 – 如何規劃 RWD 網頁
不要使用10年前或更久以前的經驗來看現在的網站。
前端經驗
如今製作網頁，最基本面臨的就是多種裝置上的呈現（早期裝置單一），所以在設計上，除了考量原先的PC版本，你更應該去進一步考量手機版、平版等多種裝置上的呈現布局(依據你的客群需求而定)。
RWD 設計上，你需要先掌握 2 個要點 :
- 網頁縮放時的區塊間位移
- RWD 主要版面寬度的訂定
以下我們針對這兩點做更細部說明。
網頁縮放時的區塊間位移
HTML 主要就是一個個版塊組合起來，所以在製作 RWD 時也是基於這點再加上CSS 來對各尺寸來做出控制。
而區塊的特性就像拼圖 or 積木一樣，白話說就是【由上到下，由左到右】進行排列。
為了好識別，以下(圖一) HTML RWD 示意圖，我將每個區塊都標上編號。
當版面中的區塊，因縮放而被擠壓到時，同一排的東西，左邊的會在上面，右邊則會往下掉。
RWD 主要版面寬度的訂定
定義主要的寬度，是確保用戶使用對應解機度的裝置時，能最大確保用戶所看到的視覺，同設計一致，避免因為視覺不同，導致品牌想傳遞的形象、資訊、意涵與記憶點受到影響。
如果你透過網路查詢 RWD 相關製作，很多會跟你說語法怎麼用，或區塊間基本如何位移，但好少會跟你說 RWD 需要定義主要的版面尺寸。
網頁規劃到製作的4個階段
在實際製作網頁上，基本都會經過以下階段：
- 第一階段 – 網頁企劃 : 需求訪談階段，收集資訊並決定 TA、呈現主軸( 資訊型、形象推廣、購物…等)
- 第二階段 – 版面規劃 : 依據主軸，結合操作動線進行網頁個區塊規劃
- 第三階段 – 設計出圖 : 將規劃範本交由設計，由設計進行美化
- 第四階段 – 頁面製作 : 工程師按圖施工
其中，RWD 主要版面寬度的訂定，必須在一開始，取決於網站/網頁主要服務的 TA or 網站類型。
如果你的 TA 主要常用的裝置只有 PC，那 RWD 你其實不用太著墨，反之，如果你是購物網站，TA廣泛， 主要常用的裝置涵蓋了手機、平板、桌機，那麼你最少就應該去定義三個版面，如下:
- 桌上型電腦 : 1440px (一般可支援1920px 顯示的螢幕)
- 平板 : 998px – 平板瀏覽器常用最大解析度
- 手機 : 375px – 手機最常用解析度
上面就是最基本的 RWD 主要版面寬度定義，實際請依據需求增修。
RWD 缺少寬度定義會發生什麼事?
舉個例子，如果有一家設計公司(以下稱A公司)，在交付網頁設計稿時，只交了一張寬 1400px 寬度的網頁設計稿，好奇嗎，單單一張單一尺寸的 RWD 設計稿，到底會造成什麼後果?
需求方/ 客戶看到第一眼 : 手機怎麼長這樣?
往前追朔製作廠商，廠商常有的反應 :
製作廠商回應 : 我們也是按圖施工，我們就接到一張1400px的圖，我們沒做錯。
製作廠商 RD 說 : 只有一張 1400px 的圖，問過沒有其他圖，其餘只好用通靈。
再往前追朔設計公司，A公司在面對質疑時，通常的反應 :
很自信、理直氣壯地回應：『我們是專業的，我們家也有前端，這就是 RWD 網頁設計稿，這樣就夠了。』
以上就是一個很典型的案例，看出問題了嗎?
如果你沒有去定義網站所需要的主要尺寸，很有可能你請託的設計公司，會很不專業的交付給你”一個尺寸”的設計稿，到最後所有專案製作人員無所依據。
你最有可能遇到的就是 RD 開始通靈，進而導致整個網站在畫面呈現上走針，整個原先該體現給用戶的形象感蕩然無存。
所以該省的工，請不要省去，請在一開始就定義好，才能避免到最後走針 or 被偷料的狀況，有時只差了基本的東西，結果就會差很多。
目前(2022)市面上最常見的 RWD 裝置寬度
| RWD 常用裝置寬度 | 說明 |
|---|---|
| 1920px – 桌上型螢幕(寬) | 螢幕滿版 or 解析大於 1920尺寸螢幕 |
| 1440px – 桌上型螢幕、筆電 | 一般可支援1920px 顯示的螢幕 |
| 1366px – 13吋筆電 | 一般公司行號員工用事務機、文書機 |
| 1024px – 平板 | 平板瀏覽器常用最大解析度( iPad Pro ) |
| 375px ~ 500px – 手機 | 手機最常用解析度 |
| 320px – 手機 | iPhone SE, iPhone 5 |
依據服務的 TA，選擇2項~全選，是常見的事情。
很多人會使用 bootstrap 來製作 RWD ，但…不要只會使用 bootstrap，卻不知道為什麼，RWD 的尺寸，永遠會隨著科技進步，裝置推誠出新而做出調整。
想知道有那些詳細的尺寸，可以看這篇
[新手入門] 如何快速上手 Media Query
Media Query 使用教學
Media Query 的詳細指令與分類，這裡我們而外詳細介紹。
以下(圖二)我們節錄之前解說的部分內容，來方便新手使用，以下是 Media Query 的基本結構與白話對照。
常用 Media Type – 解決大部分需求
| min-width | 頁面寬度，大於時套用 |
| max-width | 頁面寬度，小於時套用 |
Media Query 使用範例
大多數情況使用 :
/* EX : 當寬度 >= 1024px 時套用 */
@media screen and (min-width : 1024px ){
/* CSS Style */
}
/* EX : 當寬度 < 768px 時套用 */
@media screen and (max-width : 768px ){
/* CSS Style */
}如果你要定義一個區間，可以寫成以下的方式 :
/* EX : 當寬度介於 1024px ~ 1400px 時套用 */
@media screen and (min-width : 1024px ) and (max-width : 1400px){
/* CSS Style */
}到這裡，你已經可以開始撰寫想要的RWD樣式了。
在使用上，除非你遇到非常特別的案例，否則判斷條件足夠你克服80%~90%的專案需求。
[實務操作] 如何製作 RWD
[前置設定] 在 head 中設定 meta viewport
製作 RWD 第一步，在 HTML <head>中設定 meta viewport，一定要設，不然你CSS怎麼寫都不會有用，code 如下 :
<meta name="viewport" content="width=device-width, initial-scale=1.0">viewport 可選參數說明
| initial-scale | 初次載入縮放倍率，1等同於100% |
| minimum-scale | 最小縮放倍率，1等同於100% |
| maximum-scale | 最大縮放倍率，1等同於100% |
| user-scalable | 允許縮放，yes / no |
[應用] RWD 設定不允許縮放
常有情況不希望用戶對 RWD 網頁進行縮放，可使用以下兩個方法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">or
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">設定 RWD CSS
建立一個RWD 用的 CSS ，並導入網站中。
/* href 放你製作好的 rwd css路徑 */
<link rel="stylesheet" href="/css/rwd.css">依據UI設計，撰寫 RWD CSS 並調整畫面
請依據 UI 設計，在你所設定的 CSS 檔案中，使用 Media Query 撰寫出相對應的 RWD CSS ，要注意的是 @media 的使用，最好在原有的CSS後面，不然容易造成交錯覆蓋的狀況，範例如下。
/* EX */
// 原有的 Style
h2 {
font-size : 30px;
}
// 開始撰寫 Media Query
@media screen and (max-width : 1024px ){
h2 {
font-size : 24px;
}
}
@media screen and (max-width : 576px ){
h2 {
font-size : 18px;
}
}RWD 注意事項 – 你應該留心注意的事情
RWD 已經是目前的主流，相關的資訊其實網路上很容易查找，也有與多 CSS Library 可以使用，像是常聽到的 Bootstrap 、Milligram。
在製作上，Media Query的使用雖然很直觀、簡單，但如果你使用不當，依舊會對網頁產生不良影響，以下將告訴你，你該避免那些常見的RWD製作問題，以及如何才是良好的撰寫方法。
我該避免哪些不良的 RWD 撰寫方式?
避免狀況 1 : 避免邏輯衝突的撰寫方式
/* EX */
.demo_style{
// style
}
@media screen and (min-width : 1024px ) and (max-width : 1400px){
.demo_style{
// style
}
}
@media screen and (min-width : 1200px ) and (max-width : 1500px){
.demo_style{
// style
}
}上面範例，可以看到，@media 的尺寸定義前後邏輯是衝突的，1024~1400 與 1500~1200 是重疊的，這會造成 CSS 後蓋前或的情況，也會造成後續在維護上難以管控。
避免狀況 2 : 避免自動給尺寸 -1 ( 新手必犯問題 )
/* EX */
.demo_style{
// style
}
/* 希望不要跟1024衝突，所以1024 -1 */
@media screen and (min-width : 768px ) and (max-width : 1023px){
.demo_style{
// style
}
}
@media screen and (min-width : 1024px ) and (max-width : 1400px){
.demo_style{
// style
}
}
/* 希望不要跟1400衝突，所以1400 +1 */
@media screen and (min-width : 1401px ) and (max-width : 1600px){
.demo_style{
// style
}
}上面範例，可以看到，@media 的尺寸間，會差距 1px，這種狀況，常常發生在剛接觸RWD的新手上。
新手在製作時，往往會希望不要讓尺寸相互衝突，所以自己將此吋 +-1，所以會導致網頁在RWD 縮放時，只要寬度剛好到碰尺寸交界點，如上面範例的 1024 , 1023 與 1400,1401，畫面常常會產生抖動、跑版、破板等的情況。
什麼才是 RWD @media 的撰寫良好習慣 ?
許多人在剛接觸、學習RWD 時，最先到google 去搜尋，但跑出來的結果，都是跟你說 Media Query 可以如何使用，卻鮮少有人說在製作實務上，他應該如何妥善使用，這往往導致新手寫出來的網頁，在驗收階段錯誤百出。
如果你是自己撰寫 CSS，本身沒有套用其他 CSS library，那這邊會建議你在一開始製作 RWD Media Query 時先思考：
- RWD 對應裝置的各個尺寸
- RWD Media Query 的方向性
RWD 對應裝置的各個尺寸
顧名思義，就是RWD在縮放時，你主要要支援的裝置尺寸。
舉例來說，如果你只是 One Page的活動網頁，且主要的TA是手機裝置，那麼你可能只須定義 768 一個尺寸，以下為手機裝置，以上為PC版，就足夠用了。
/* PC版 CSS */
.demo_style{
// style
}
/* 768 以下手機板使用 */
@media screen and (max-width : 768px ){
.demo_style{
// style
}
}如果你製作的網頁是基本的RWD官網，那麼你可能會需要先定義好 PC、平板、手機的切換尺寸。
RWD Media Query 的方向性
這裡說的 RWD 方向性，是指你在撰寫時，應該先思考好，你的 CSS 樣式，要往哪個方向發展，遵守這樣的撰寫規則，可以有效避免 CSS 衝突 or 遺漏的問題。
以下直接提供兩個範本，可以任選一個使用 :
RWD Media Query 方向 ：大→小 ( 桌機→筆電→平板→手機 )
/* 以 PC 版為主要 Style，CSS 對應 width 1366px 以上 */
.demo_style{
// style
}
/* 1366px 以下開始為筆電 */
@media screen and (max-width : 1366px ){
.demo_style{
// style
}
}
/* 1024px 以下開始為平板 ( ex: iPad Pro ) */
@media screen and (max-width : 1024px ){
.demo_style{
// style
}
}
/* 768px 以下開始為 小平板 & 手機(橫) */
@media screen and (max-width : 768px ){
.demo_style{
// style
}
}
/* 576px 以下開始為 手機(直) */
@media screen and (max-width : 576px ){
.demo_style{
// style
}
}
/* 320px 以下開始為 手機(直) 最小尺寸 */
@media screen and (max-width : 320px ){
.demo_style{
// style
}
}
/* 以下自訂義特殊區塊 - 通常不會用到*/RWD Media Query 方向 ：小→大 ( 手機→平板→筆電→桌機 )
/* 以 Mobile 版為主要 Style，CSS 對應 width 576 or 375 or 320以下 */
/* 576px 以下開始為 手機(直) */
.demo_style{
// style
}
/* 576px 大於開始為 小平板 & 手機(橫) */
@media screen and (min-width : 576px ){
.demo_style{
// style
}
}
/* 768px 大於開始為平板 ( ex: iPad Pro ) */
@media screen and (min-width : 768px ){
.demo_style{
// style
}
}
/* 1024px 大於開始為筆電 */
@media screen and (min-width : 1024px ){
.demo_style{
// style
}
}
/* 1366px 大於開始為 PC */
@media screen and (min-width : 1366px ){
.demo_style{
// style
}
}
/* 以下自訂義特殊區塊 - 通常不會用到*/不論你是選擇尺寸由大寫到小還是小寫到大，max-width與 min-width都可以隨自己喜好、習慣去選擇使用，這裡只需要注意尺寸的撰寫順序，決定一種後，整體盡可能的統一，可以方便管理，也避免遺漏。
在使用 CSS library 後，又該如何定義 Media Query?
如果你有選用 CSS library，那麼你應該先去了解你所用的 CSS libaray 在 RWD Media Query規劃上是如何做的，掌握一個宗旨，網站的 RWD Media Query 撰寫規則盡量統一。
例如像大眾常用的 Bootstarp 5，就採用小→大的設計，所以你在後續要撰寫RWD時，盡量依造相同邏輯去撰寫，可幫助後續管理與維護。
/* 取自 bootstarp 5.0 CSS 片段*/
@media (min-width: 576px){
.col-sm-4 {
flex: 0 0 auto;
width: 33.33333333%;
}
}
@media (min-width: 768px){
.col-md-4 {
flex: 0 0 auto;
width: 33.33333333%;
}
}
@media (min-width: 992px){
.col-lg-4 {
flex: 0 0 auto;
width: 33.33333333%;
}
}結論
以上就是最基本的 RWD 網頁製作流程，如果有相關問題，或是覺得有那裡不對的地方，歡迎下方留言提問與交流。
binance minimum deposit
I don’t think the title of your article matches the content lol. Just kidding, mainly because I had some doubts after reading the article.
Create Account
I have read your article carefully and I agree with you very much. This has provided a great help for my thesis writing, and I will seriously improve it. However, I don’t know much about a certain place. Can you help me?
fund password gate.io
I agree with your point of view, your article has given me a lot of help and benefited me a lot. Thanks. Hope you continue to write such excellent articles.