響應式頁面組成 創建可伸縮圖像 創建彈性佈局網格 可以設置相對的max-width；預設的字體大小是16px；em寬度是基於元素字體大小 媒體查詢 增強媒體類型方法，允許根據特定的設備特性定位樣式，要調整網站的呈現樣式，讓其適應不同的屏幕尺寸 ...
響應式頁面組成
- 靈活圖像，媒體；資源尺寸使用百分比定義
- 流式佈局，所有width屬性使用百分比設定，水平屬性通常使用相對單位（em,百分數，rem等）
- 媒體查詢，根據媒體特征進行設計調整
創建可伸縮圖像
- html中不指定width,height屬性
- 在css表中使用max-width:100%；（不使用width:100%；會讓圖像竟可能填充容器，如果容器的寬度比圖像寬，圖像就會放大到超過本來尺寸，顯示不好看）
創建彈性佈局網格
- 元素的百分數寬度基於其父元素提供的可用空間：要指定的寬度（px為單位）/容器寬度（px） = 值；
-
.page{ max-width:960px; } .main{ width:62.5%; /*要求寬度(600px)/容器寬度（960px）= 62.5%*/ }
可以設置相對的max-width；預設的字體大小是16px；em寬度是基於元素字體大小
.page{ max-width:60em; /*960px / 16px = 60 */ }
媒體查詢
增強媒體類型方法，允許根據特定的設備特性定位樣式，要調整網站的呈現樣式，讓其適應不同的屏幕尺寸
- 可以包含在媒體查詢里的特性：width,height,device-width(設備寬度),device-height,orientation(方向),aspect-ratio(高寬比)，color，color-index(顏色數),monochrome(單色)，resolution(解析度),scan(描述),grid（柵格），-webkit-device-pixel-ratio（webkit設備像素比），-moz-device-pixel-ratio（mozilla設置像素比）
- 使用link元素的media屬性
<head> <link rel="stylesheet" href="your-styles.css" media="logic type and (feature:value)" /> <!-- 僅用於支持媒體查詢且視覺區域不低於480px的瀏覽器 --> <link rel="stylesheet" href="your-style.css" media="only screen and (min-width:480px)"> </head>
- 在樣式表中使用@media規則
@media logic type and (feature:value){ /* 目標css樣式規則寫在這裡 */ } /* the logic is only the type is screen the feature:value is min-width:480px */ @media only screen and (min-width:480px){ p { color:red; font-weight:bold; } }
- logic（邏輯）值為：noly 和 not ；
- only 確保舊的瀏覽器不讀取餘下的媒體查詢，同時忽略鏈接的樣式表
- not 對媒體查詢的結果取反
- type（類型）媒體類型，screen print 等
- featrue: value ;使用需要加上 and ( min-width:480px)
- 視覺區域：瀏覽器顯示頁面的區域，不包含瀏覽器地址欄，按鈕；
- 媒體查詢的width特性 ----- 視覺區域的寬度
- device-width特性 ------- 屏幕的寬度
- 移動端上顯示網站縮小的樣子，可以添加meta元素，使得視覺區域的寬度會被設置與設備寬度相同的值
<meta name="viewport" content="width=device-width,initial-scale=1"></head>
