1.什么是響應式 Web 設計?
- 響應式 Web 設計讓你的網頁能在所有設備上有好顯示。
- 響應式 Web 設計只使用 HTML 和 CSS。
- 響應式 Web 設計不是一個程序或Javascript腳本。
2.響應式的作用：設計最好的用戶體驗
友好的用戶體驗是網頁可以在任何設備上展示和操作，設備包括桌面系統設備，平板電腦，iPhone等手機等。
網頁應該根據設備的大小自動調整內容。
頁面的設計與開發根據用戶行為以及設備環境(系統平台、屏幕尺寸、屏幕定向等)進行相應的響應和調整稱之為響應式 Web 設計。
3.自適應設計或者響應式設計的方法
（1）使用@media，條件（min-width: 768px）判斷當瀏覽器的寬度小於768px值時，改變樣式。
@media (min-width: 768px) {
.main {
width: 25%;
float: left;
}
}
通過媒體查詢選擇性加載css，意思是自動探測屏幕寬度，然后加載相應的CSS文件。
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />
上面的代碼意思是，如果屏幕寬度小於400像素（max-device-width: 400px），就加載tinyScreen.css文件。
link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />
上面的代碼意思是：如果屏幕寬度在400像素到600像素之間，則加載smallScreen.css文件。
（2）寬度使用百分比，盡量少使用絕對值寬度。
由於網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。
例如：
不能使用一下css代碼：
div{width：xxx px}
在響應式中，應該這么使用：
div{
width:100%;
//或者
width:auto;
}
（3）字體的設置相對大小
移動端字體也不能使用絕對大小（px），而只能使用相對大小（em）或者高清方案（rem）,rem不局限於字體大小，前面的寬度width也可以使用，代替百分比
body{
font: normal 100% Helvetica, Arial, sans-serif;//設置字體大小為默認大小，16像素
}
移動端設置字體大小：
在移動端上，設置字體為24px，則24/16=1.5，p的大小是默認大小的1.5倍，即24像素（24/16=1.5）。
p{font-size: 1.5em}
（4）流動布局（fluid grid）
“流動布局”的含義是，各個區塊的位置都是浮動的，不是固定不變的。
.leftDiv{
float: left;
width: 70%;
}
.rightDiv {
float: right;
width: 25%;
}
4.具體理解
在網頁上，寫一個普通的網頁效果
<!DOCTYPE html>
<html>
<head>
<title>測試</title>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> -->
</head>
<style type="text/css">
p{border: 1px solid black;}
</style>
<body>
<div>
<p>響應式原理</p>
</div>
</body>
</html>
模擬手機上看到的樣式，字體很小，看不清，是因為按照電腦上的像素對字體進行設置的，分辨率不一樣。
加上代碼后的樣式：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
- viewport: 一般指的是瀏覽器窗口內容區的大小，不包含工具條、選項卡等內容
- width: 瀏覽器寬度，輸出設備中的頁面可見區域寬度
- device-width: 設備分辨率寬度，輸出設備的屏幕可見寬度
- initial-scale: 初始縮放比例
- maximum-scale: 最大縮放比例
