1、概述
網頁設計根據裝置環境進行相應的響應與調整
優點：對使用者友好；後臺資料庫統一；方便維護
缺點：增加載入時間；開發時間
原理：<meta>標籤；使用媒體查詢/媒介查詢適配對應樣式；使用第三方框架(如Bootstrap)
2、關於螢幕適配的常用術語
畫素和螢幕解析度
畫素，全稱影象元素，是尺寸單位
螢幕解析度就是螢幕上顯示的畫素個數，以水平解析度和垂直解析度來衡量大小，當螢幕解析度低時—畫素少—尺寸大；當螢幕解析度高時—畫素多—尺寸小
裝置畫素和CSS畫素
裝置畫素(物理概念)：裝置中使用的物理畫素——ppi
CSS畫素(網頁程式設計的概念)：CSS樣式程式碼中使用的邏輯畫素
裝置畫素和CSS畫素的換算是通過裝置畫素比完成
3、視口
概念
桌面瀏覽器中的視口：等於瀏覽器中的視窗，視口中的畫素指的是CSS畫素，視口大小決定了頁面佈局的可用寬度，視口的座標是邏輯座標與裝置無關
移動瀏覽器中的視口：分為可見視口和佈局視口
在移動瀏覽器中，通過<meta>標籤中引入viewport屬性來處理可見視口和佈局視口的關係
引入程式碼：<meta name="viewport" content="width=device-width, initial-scale=1.0">
常用屬性
viewport屬性表示裝置螢幕上能用來顯示網頁的區域
viewport常用屬性值：width、height、initial-scale(設定頁面初始縮放比例0~10)、user-scalable(設定使用者是否可以縮放yes/no)、minimum-scale(最小縮放比0~10)、maximum-scale
媒體查詢
媒體查詢可根據裝置顯示器的特性設定CSS樣式
步驟：1、<meta>標籤中新增viewport屬性的程式碼；
　　    2、使用@media關鍵字編寫CSS媒體查詢程式碼
4、響應式網頁的佈局設計
常用佈局型別
單列布局——適合內容較少的網站佈局，一般由頂部Logo和選單(一行)、中間的內容區域(一行)和底部網站相關資訊(一行)共3行組成
均分多列布局——列數>=2列的佈局型別，每列寬度相同，列與列間距相同，適合商品/圖片的列表展示
不均分多列布局——列數>=2列的佈局型別，每列寬度不同，列與列間距不同，適合部落格類文章內容頁面的佈局，一列布局文章內容，一列布局廣告連結等內容
佈局的實現方式
(按照頁面的寬度單位——畫素/百分比來劃分)
單一式固定佈局——以畫素作為頁面基本單位
技術簡單，適配性差
響應式固定佈局——以畫素作為頁面基本單位
通過媒體查詢技術識別不同螢幕/瀏覽器的寬度
實現成本最低，拓展性較差
響應式彈性佈局——以百分比作為頁面基本單位
可以適應一定範圍內所有裝置螢幕及瀏覽器的寬度
響應式網頁佈局的設計與實現
模組內容不變——通過調整模組的寬度，可以將模組內容從擠壓調整到拉伸，從平鋪調整到換行
模組內容改變——通過媒體查詢，檢測當前裝置的寬度，動態隱藏/顯示模組內容，增加/減少模組數量