1.viewport標簽 基本語法： <meta name=”viewport” content=”width=device-width,initial-scale=1” /> 上面這行代碼的意思是，面積的100%，網頁寬度預設等於屏幕寬度（width=device-width）, 原始縮放比例（i ...
1.viewport標簽
基本語法：
<meta name=”viewport” content=”width=device-width,initial-scale=1” />
上面這行代碼的意思是，面積的100%，網頁寬度預設等於屏幕寬度（width=device-width）,
原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕。
2.媒體查詢
“自適應網頁設計”的核心，就是CSS3引入的Media Query
自動探測屏幕寬度，然後載入相應的CSS文件。
<link rel=”stylesheet” type=”text/css” media=”screen and {max-width:767px}” href=”phone.css”>
上面的代碼意思地，如果屏幕寬度小於767像素（max-width：767px）就載入phone.css文件
<link rel=”stylesheet” type=”text/css” media=”screen and {min-width:767px}” href=”style.css”>
上面的代碼意思地，如果屏幕寬度大於767像素（min-width：767px）就載入style.css文件
3.不適用絕對寬度
1）網頁寬度
CSS代碼不能指定像素寬度，應使用百分比
例：width: xxx%
2）相對字體大小
rem字體大小是相對於根元素<html>字體大小，預設網頁根元素大小為100%，即16像素，所以1rem = 16px;(0.75rem = 12px, 0.875rem = 14px;)
在實際項目中，可以使用如下方式設置：
html{font-size:62.5%} 即1rem = 10px；
還有一種百分比形式
3）圖片自適應（fluid image）
“自適應網頁設計”必須實現圖片的自動縮放
img{ max width :100%;}
為了保證所有多媒體標簽實現自適應也可以設置object，embed{ max-width: 100%;}
