自適應（電腦/平板/手機）網頁，自適應網頁設計
一、面臨問題：網頁在電腦上完全顯示，但在手機上顯示不完全（需要左右拉動才看得到其他部分）
例如：下面這個簡易的網頁，為加入自動適應之前，電腦和手機開啟都是下圖效果，電腦上顯示看上去效果不錯，但手機上需要左右拉動才可以看到網頁其他部分，那如何解決這個問題呢？
二、解決問題
1.目標：在手機上也得完全顯示就行
2.實際操作部分（重點）：
①將網頁調整權交給網頁
- <head>標籤中加入一行viewport（網頁預設的寬度和高度）元標籤
<meta name="viewport" content="width=device-width， initial-scale=1" />width=device-width：
initial-scale=1；1代表網頁初始大小佔螢幕面積的100%
- 注意：老式瀏覽器（例如：IE6、7、8），需要使用css3-mediaqueries.js，如下
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
②禁止使用絕對寬度
不可：以下這種程式碼不可使用
width：10px； <!-- 這種程式碼不可行 -->可行：以下兩種程式碼均可
width: 20%;width:auto;③靜止對字型使用固定大小
不可：以下這種程式碼不可使用
font-size: 12px可行：以下程式碼均可行
font-size:1.2em補充：瀏覽器的預設字型高都是16px，所以未經調整的瀏覽器在顯示1em=16px。於是我們就可以通過這個等量關係進行計算了！若已經寫好的網頁字型的px直接除以16就是em了。
body {
font: normal 100% Helvetica， Arial， sans-serif;
}④得是流動佈局
- 就是使用float
#father .panel_text{
background-color: #F5F5F2;
float: left;
margin-left: -88%;
margin-top: 15%;
width:295%;
height:200%;
}⑤選擇css，就像if判斷
利用css3中的Media Query模組
提示：下面if、if else只是方便解釋寫的，直接將程式碼框的程式碼放在<meat>標籤裡
if（如果螢幕寬度小於400畫素）{
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="css/tinyScreen.css" />}else if（如果400畫素<螢幕寬度<600畫素）{
<link rel="stylesheet" type="text/css"media="screen and (min-width: 400px) and (max-device-width: 600px)" href="css/tinyScreen.css" />}
⑦還有圖片啦！
寫這個簡易頁面時就踩了一個坑，圖片沒有設定。。。
css程式碼用下%號結束就行！
#father .panel_text img{
width:100%;
height:100%;
}-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
第⑤步（補充類，另外一種方法）css3中@media的使用（根據螢幕，在一個css檔案中判斷使用哪段css程式碼）
先看看定義：
- 使用 @media 查詢，你可以針對不同的媒體型別定義不同的樣式。
- @media 可以針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，@media 是非常有用的。
當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
以下程式碼意思：如果文件寬度小於 300 畫素則修改背景顏色(background-color):
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}最後來個總結吧：印象最深的就是自適應的思維和物理學很近有木有！由於物體可以選取其他不同的東西做參考，所以物理書：“運動是絕對的，靜止是相對的”那遷移到這個程式碼上也是一樣啦！網頁對應不同的螢幕標準得自動適應，那程式碼就得采用相對的，而不是絕對的！