1、響應式網頁： ①Responsive Web Page：一個可以根據瀏覽設備的不同，而自動更改佈局、圖片、文字效果的網頁； ②構成：不能固定寬度，必須流式佈局；文字和圖片大小隨容器大小而改變；CSS3 Media Query；2、響應式網頁編寫： ①必須聲明viewport元標簽： <meta ...
1、響應式網頁：
①Responsive Web Page：一個可以根據瀏覽設備的不同，而自動更改佈局、圖片、文字效果的網頁；
②構成：不能固定寬度，必須流式佈局；文字和圖片大小隨容器大小而改變；CSS3 Media Query；
2、響應式網頁編寫：
①必須聲明viewport元標簽：
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
* 避免用戶左右滑動屏幕，禁止瀏覽器初始時縮放顯示；
②容器的寬度儘量不使用固定值（px），使用相對寬度（%或auto）；
③文字儘量不使用絕對尺寸（px），使用相對尺寸（em或rem）；
④圖片要指定大小，如：
img{
max-width:100%;/*隨容器縮小，但最大不會超過圖片原始大小——防止失真*/
}
⑤頁面佈局時不能固定，採用流式佈局，如浮動，inline-block；
⑥靈活使用CSS3 Media Query技術——響應式網頁必備元素！
3、CSS3 Media Query技術：
①Media：指瀏覽網頁的設備，如screen、tv、projection、tty（字元終端）、print、braille、speech等；
②Query：指自動獲取當前瀏覽設備物理特性，如色彩深度、orientation、width、height等；
③CSS媒體查詢技術：可以根據瀏覽設備的類型及特性，執行不同的CSS代碼；
④CSS3 Media Query兩種用法：
a、根據媒體查詢結果，執行不同的外部CSS文件：
<link media="screen and (max-width:991px) and (min-width:768px)" rel="stylesheet" href="css/pad.css"/>
不足：當前設備不執行的CSS文件也會被瀏覽器載入，每個CSS文件可能存在很多重覆代碼；
b、在一個CSS片段中，有選擇的執行某些選擇器：
@media screen and (min-width:768px) and (max-width:991px){
選擇器{屬性名：值}
}
4、BootStrap模板：
①<html lang="zh-cn">
HTML標簽的lang屬性（language），用於指定當前網頁的自然語言（可取值zh-cn、en、en-us、ja等）；
作用：為瀏覽器翻譯功能指明原始語言；為屏幕閱讀軟體指明應該使用的發音；
②<meta http-equiv="X-UA-Compatible" content="IE=dege">
HTTP響應消息頭部：X-UA-Compatible；
Cross-UserAgent-Compatible：IE瀏覽器專用頭部，告訴新版本的IE相容哪個版本的內核，edge表示啟用能夠使用的最新的版本內核；
5、BootStrap全局CSS樣式：
①按鈕相關Class：
.btn——按鈕基礎樣式；
.btn-default——白底黑字按鈕；
.btn-danger——紅色按鈕；
.btn-warning——黃色按鈕；
.btn-success——綠色按鈕；
.btn-info——淺藍色按鈕；
.btn-primary——深藍色按鈕；
.btn-lg——大號按鈕；
.btn-sm——中號按鈕；
.btn-xs——小號按鈕；
.btn-block——塊級按鈕；
②圖片相關Class：
.img-circle——圓形圖片；
.img-rounded——圓角圖片；
.img-thumbnail——縮略圖片；
.img-responsive——響應式圖片；
③文本相關Class：
.text-danger/warning/success/info/primary——五種文本顏色；
.bg-danger/warning/success/info/primary——五種文本背景顏色；
.text-uppercase——文本轉換為大寫形式；
.text-lowercase——文本轉換為小寫形式；
.text-capitalize——文本轉換為首字母大寫形式；.text-left——文本左對齊；
.text-center——文本居中對齊；
.text-right——文本右對齊；
.text-justify——文本兩端調整對齊；
