響應式網頁設計（英語：Responsive web design，通常縮寫為RWD），或稱自適應網頁設計、回應式網頁設計、對應式網頁設計。是一種網頁設計的技術做法，該設計可使網站在不同的裝置（從桌面電腦顯示器到行動電話或其他行動產品裝置）上瀏覽時對應不同解析度皆有適合的呈現，減少使用者進行縮放、平移和捲動等操作行為。

環境建立

首先，你必須先在網站開始 <head> 的地方加上以下meta語法，用於規定裝置的的結構規則：

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">

viewport

根據裝置的顯示區域來展示文件
放大或縮小文件，來符合或設定上給予裝置的可視區域
允許設定或初始化縮放的級別，或是其他規則

參數的解釋

參數	解釋
device-width	畫面寬度
device-height	畫面高度
initial-scale	初始縮放比
minimum-scale	最小可縮放比
maximum-scale	最大可縮放比
user-scalable	使用者是否可縮放

註：使用 emmet 輸入 meta:vp 可以快速建立環境。

CSS 3 Media Query 觀念

在編寫 CCS3 Media Query 前須先建立一支CCS的樣式表，並載入它。

CSS Media Queries

and: and 是最常使用的語法，用邏輯的方式去想就代表左右兩邊均成立這個條件才成立，而 and 最常被擺在 Media Feature 進行串接。

not: 用來排除某些設備的樣式，假如有AB兩個設備，其中有一個樣式是想要A有卻不想要B有，這時候就可以用 @media A not B 的方式來讓A設備有指定樣式。

only: 用於一些老舊不支援 Media Queries 的瀏覽器，這個語法了解就好了。

Media Type

以下列出最常用的三種：

all: 用於全部的裝置。

screen: 用於所有的螢幕，凡舉電腦、手機、平板裝置等螢幕皆適用於此。

print: 用於印表機，此樣式套用於預覽列印中。

Media Feature

width: 用於全部的裝置。

screen

寬度可分為 max-width(最大寬度) 以及 min-width(最小寬度) 兩種，用於裝置寬度範圍內的特定樣式。

max-width：表示這個數字(包含)以下（<=）的都適用。
min-width：表示這個數字(包含)以上（>=）的都適用。

height: 高度可分為 max-height(最大高度) 以及 min-height(最小寬度) 兩種，用於裝置高度範圍內的特定樣式。

orientation: 當裝置處於 portrait(直立) 以及 landscope(橫向) 時會有特定樣式。

編寫方式：

以桌機為主，然後再往其他更小的裝置尺寸做調整。

@media (max-width: 1200px) { 樣式 }

@media (max-width: 992px) { 樣式 }

@media (max-width: 768px) { 樣式 }

@media (max-width: 480px) { 樣式 }

以更小的裝置尺寸為主，然後再往桌機做調整。

@media (min-width: 576px) { 樣式 }

@media (min-width: 768px) { 樣式 }

@media (min-width: 992px) { 樣式 }

@media (min-width: 1200px) { 樣式 }

Media Rule 以及條件語法結合成 Media Query

/* 當裝置寬度介於576~768px之間，className為button-toggle會有display: none;的樣式 */
@media screen and (min-width: 576px) and (max-width: 768px) {
  .button-toggle {
    display: none;
  }
}

動線設計

並非所有內容都要全部塞到網頁內容。

在小螢幕的載具，設計設計響應式網頁時，應讓使用者立即吸收到相對應的資訊，故有些較不重要的元素可以隱藏。
少即是多：避免資訊量爆炸。

點擊範圍

設計讓人好點選的元素。

設計響應式網頁時，須特別注意點擊的範圍，研究顯示手指在點選時高度約 44px，故於設計時須滿足 44px 這個法則。

斷點元素

只有手機才會顯示的功能與Layout切換。

漢堡選單。

桌面板

選單為水平排列
隱藏漢堡選單

行動版

選單為垂直排列(預設隱藏)
顯示漢堡選單

/*選單為水平排列*/
.navbar-menu > li {
  display: inline-block;
}
/*隱藏漢堡選單*/
.button-toggle {
  display: none;
}
@media screen and (max-width: 768px) {
  /*選單為垂直排列(預設隱藏)*/
  .navbar-menu {
    display: none;
  }
  /*選單顯示為垂直排列*/
  .navbar-menu.active {
    display: block;
  }
  .navbar-menu > li {
    display: block;
  }
  /*顯示漢堡選單*/
  .button-toggle {
    display: inline-block;
  }
}

斷點時機

設計多欄式佈局的必要觀念。

思考設計響應式斷點

遵循 80/20 法則，先兼容熱門瀏覽器吧！

有舊網站時，先套用google分析觀察數據。
如無，以最熱門載具的解析度為主。

What is Mobile First & Desktop First

Mobile First

手機>平板>高解析螢幕PC

@media (min-width: ...px) {}

Desktop First

高解析螢幕PC>平板>手機

@media (max-width: ...px) {}

設計響應式網頁前須先思考，此網頁於哪種載具使用上較為多數，以此為出發點來設計。

手機使用者為多數，可考慮 Mobile First。
PC市占較為多數的話，可考慮 Desktop First

常見 PC 解析度斷點設計

於PC上螢幕解析度多數大於1280px，但設計網頁時仍會局限一個範圍，主要原因有

使用的者的視線範圍無法觀看到太大的範圍(如：1920px)。
版形太大，圖片解析度也隨之變大，此時會影響載入時間，進而影響使用者體驗。

常見的斷點如下：

960px
1000px
1280px

六角講師斷點設計分享

iPad - 768px
iPad以下 - 767px
iPhone 6 Plus - 414px (視專案族群)
iPhone 6 - 375px (視專案族群)
iPhone 5、SE - 320px

為什麼還會有一個 767px 的斷點，
因為通常 iPad 直式是 Android、IOS 平版很常見的大小，
再接著 767px ~ 320px 會視為都是手機 size，
所以在 767 px 以下時就會直接把他變成手機版型，
畢竟 767px ~ 6xx size 相當少見，一開始可以先確保一些熱門斷點上優化即可，
至少可以滿足 80% 以上的客戶。

再來 320px 是你最小需要注意的 SIZE，
現在仍然有許多手機是 320px，尤其是小 size 的 iPhone，
以前甚至有 240px 的手機，但現在已經相當稀有了。

響應式表格與表單設計

響應式表格設計

於響應式網頁設計表格時，在較小解析度的載具顯示表格，可以將一些較不重要的資訊隱藏起來。
使用 display: none

@media (max-width: 569px) {
  /*要隱藏的欄位class*/
  .m-none {
    display: none;
  }
}

如果資訊都很重要無法隱藏的情況下：

@media (max-width: 569px) {
  /*表格外層的class*/
  .container {
    overflow: auto;
  }
  /*表格本身的class*/
  .order {
    width: 768px;
  }
}

使用第3方插件

使用第3方插件 pure.css，加強對網頁元素的了解。

按鈕設計原理

可以從原始碼上看到關於設計上的細節。

針對不同的瀏覽器有不同的前綴詞

.pure-button {
    /* Structure */
    display: inline-block;
    zoom: 1;
    line-height: normal;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    -webkit-user-drag: none; /* for chrome */
    -webkit-user-select: none;
       -moz-user-select: none; /* for firefox */
        -ms-user-select: none; /* for IE */
            user-select: none;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

針對不同版本的瀏覽器樣式的寫法

.pure-button {
    font-family: inherit;
    font-size: 100%;
    padding: 0.5em 1em;
    color: #444; /* rgba not supported (IE 8) */
    color: rgba(0, 0, 0, 0.80); /* rgba supported */
    border: 1px solid #999;  /*IE 6/7/8*/
    border: none rgba(0, 0, 0, 0);  /*IE9 + everything else*/
    background-color: #E6E6E6;
    text-decoration: none;
    border-radius: 2px;
}

響應式圖片設計

基礎篇

設計響應式網頁的圖片內容時，如要讓圖片可以隨瀏覽器自適應延伸的話。
有以下兩種CSS寫法：

width: 100%

此作法圖片會隨者父元素做自適應延伸，如父元素寬度大於圖片自身的寬度，會導致圖片出現模糊的區域。

max-width: 100%

此作法圖片最大只會保持自身的圖片大小，再隨者父元素寬度縮小而自適應延伸。

響應式圖片 reset 教學

未避免圖片太大會有破版的問題，可以設定reset語法。

img {
  max-width: 100%;
  height: auto;
}

心法篇

響應式圖片 SIZE 規劃，會刻意設計較大張一點，以便於不同載具呈現圖片時，不會出現圖片模糊的情況。
將 LOGO 由 PNG 格式取代為 SVG 格式。

a {
  background-image: url(/PATH/xxx.svg);
  /*文字縮排*/
  text-indent: 101%;
  overflow: hidden;
  /*不換行*/
  white-space: nowrap;
}

技巧篇

Banner 設計

使用 img 標籤方式，使用此方式需設定 reset 語法，讓圖片可以自適應的延伸，但選用圖片注意不要佔據太大的版面。
使用背景圖片方式，可以固定高度顯示範圍。

.banner {
  height: 400px;
  background-repeat: no-repeat;
  background-position: center center; /*圖片置中*/
  background-size: cover;
  background-image: url(圖片網址);
}

工具篇

優化網站載入圖片的速度，壓縮圖片。

壓縮圖片服務: tinypng

響應式網頁設計(RWD) 介紹