網頁自適應
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%;}
浙公網安備 33010602011771號