自適應（電腦/平板/手機）網頁，自適應網頁設計練習總結
自適應（電腦/平板/手機）網頁，自適應網頁設計練習總結
4 人贊了文章
剛好寫了個練習，應該是這種效果吧！
電腦端：
手機端：（當然還可以寫平板頁面啦）
①將網頁調整權交給網頁（html中）
- <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]-->
②禁止使用絕對寬度（css中）
不可：以下這種代碼不可使用
width：10px； <!-- 這種代碼不可行 -->
可行：以下兩種代碼均可
width: 20%;width:auto;
③靜止對字體使用固定大小（css中）
不可：以下這種代碼不可使用
font-size: 12px
可行：以下代碼均可行
font-size:1.2em
補充：瀏覽器的默認字體高都是16px，所以未經調整的瀏覽器在顯示1em=16px。於是我們就可以通過這個等量關係進行計算了！若已經寫好的網頁字體的px直接除以16就是em了。
body { font: normal 100% Helvetica， Arial， sans-serif;} <!--html中-->
④得是流動佈局（css中）
- 就是使用float
#father .panel_text{ background-color: #F5F5F2; float: left; margin-left: -88%; margin-top: 15%; width:295%; height:200%; }
⑤讓網頁選擇適應屏幕的css，就像Java等語言中的if判斷（在html中）
利用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代碼是具體情況，我做的練習頁面是100%，但最好根據屏幕設置對應解析度的圖片！
----------------------------------------------------------------------------------------------------
end：第⑤步（補充類，另外一種方法）css3中@media的使用（根據屏幕，在一個css文件中判斷使用哪段css代碼）
先看看定義：
- 使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。
- @media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。
當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
以下代碼意思：如果文檔寬度小於 300 像素則修改背景顏色(background-color):
@media screen and (max-width: 300px) { body { background-color:lightblue; }}
最後來個總結吧：印象最深的就是自適應的思維和物理學很近有木有！由於物體可以選取其他不同的東西做參考，所以物理書：「運動是絕對的，靜止是相對的」那遷移到這個代碼上也是一樣啦！網頁對應不同的屏幕標準得自動適應，那代碼就得採用相對的，而不是絕對的！
推薦閱讀：
