中英文術語
響應式web設計
網頁內容會隨著訪問它的視口及設備的不同而呈現不同的樣式
CSS預處理器
可以組織代碼、變量、顏色操作和數字變量
PostCSS
可以完成添加瀏覽器前綴
視口（viewport）
瀏覽器中用于呈現網頁的區域。視口通常并不等于屏幕大小，特別是可以縮放瀏覽器窗口的情況下。
<meta>標簽
按照設備的寬度（device-width）來渲染網頁內容。
max-width規則
保證所有圖片最大顯示為其自身的100%（即最大只可以顯示為自身那么大）。如果包含圖片的元素（比如包含圖片的body或div）比圖片固有寬度小，圖片會縮放占滿最大可用空間。
WWW（World Wide Web）
WWW中文譯為萬維網，是Internet提供的一種網頁瀏覽服務。
DNS（Domain Name System）
域名解析系統
URL（Uniform Resource Locator）
URL中文譯為統一資源定位符，其實就是Web地址（網址）。
HTTP（Hypertext transfer protocol）
HTTP中文譯為“超文本傳輸協議”，是一種詳細規定了瀏覽器和萬維網服務器之間互相通信的規則。
Web標準
Web標準不是某一個標準，而是由W3C和其他標準化組織制定的一系列標準的集合。
結構標準用于對網頁元素進行整理和分類，主要包括兩個部分：XML和HTML。
表現標準用于設置網頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS。
行為標準是指網頁模型的定義及交互的編寫，主要包括兩個部分：DOM和ECMAScript。
HTML（Hyper Text Markup Language）
HTML中文譯為“超文本標記語言”，主要是通過HTML標記對網頁中的文本、圖片、聲音等內容進行描述。
CSS
CSS通常稱為CSS樣式或樣式表，主要用于設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。
JavaScript
JavaScript是Web頁面中的一種腳本語言，通過JavaScript可以將靜態頁面轉變成支持用戶交互并響應相應事件的動態頁面。在網站建設中，JavaScript用于為頁面添加動態效果。
為什么需要響應式web設計
StatCounter2017年6月瀏覽器調查報告
StatCounter2018年2月Windows 10市場份額
1.開發、維護和運營上，相對多個版本，能節約成本。
2.兼容性優勢???
移動設備新的尺寸層出不窮，定制的版本通常只適用于某些規格的設備，如果新的設備分辨率變化較大，則往往不能兼容，但是響應式Web設計可以提前預防這個問題。????
3.操作靈活
響應式設計是針對頁面的，可以只對必要的頁面進行改動，其他頁面不受影響。
?采用響應式Web設計
未采用響應式Web設計
RWD的三項組成科技
1、media query（媒體查詢）：
① 使用 @media 查詢可以針對不同的媒體類型定義不同的樣式。
② @media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果需要設置設計響應式的頁面。
③ 重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
媒介類型：
print：用于打印機和打印預覽
screen：用于電腦屏幕，平板電腦，智能手機等
all：用于所有媒體設備類型
媒介特征：
device-height：定義輸出設備的屏幕可見高度。
device-width：定義輸出設備的屏幕可見寬度。
height：定義輸出設備中的頁面可見區域高度。
width：定義輸出設備中的頁面可見區域寬度。
max-device-height：定義輸出設備的屏幕可見的最大高度。
max-device-width：定義輸出設備的屏幕可見的最大寬度。
max-height：定義輸出設備中的頁面可見的最大高度。
max-width：定義輸出設備中的頁面可見的最大寬度。
min-device-height：定義輸出設備的屏幕可見的最小高度。
min-device-width：定義輸出設備的屏幕可見的最小寬度。
min-height：定義輸出設備中的頁面可見的最小高度。
min-width：定義輸出設備中的頁面可見的最小寬度。
2、流動網格布局：
網站的布局必須對顯示該網站的設備的尺寸作出反應并適應該尺寸。流體網格布局為創建與顯示網站的設備相符的不同布局提供了一種可視化的方式。
3、靈活縮放的圖片：
同一個圖片需要不同尺寸的縮略圖片，一般有兩種策略生成縮略圖，一種在上傳圖片時，生成需要的縮略圖，另一種是請求指定尺寸的圖片時生存縮略圖片。
RWD和前后端的關系
需要依賴后端方案的RWD：
網頁版、手機版、等等分開服務、設計、產出頁面
不需要依賴后端方案的RWD：
網頁版、手機版、等等一起服務、設計、產出頁面
響應式web設計
“響應式web設計”是Ethan Marcotte在2010年發明的，所謂響應式web設計，就是網頁內容會隨著訪問它的視口及設備的不同而呈現不同的樣式。最初，響應式設計是從桌面，固定寬度設計開始的，然后到了小屏幕上，內容會重排，或者根據情況隱藏部分內容。隨著時間推移，還是采用相反的設計思路更好，即先為小屏幕設計內容、樣式，然后再向大屏幕擴展。----摘自《響應式Web設計》
