BODY background=自适应大小_自适应（电脑/平板/手机）网页，自适应网页设计练习总结...
剛好寫了個練習，應該是這種效果吧！
電腦端：
電腦手機端：（當然還可以寫平板頁面啦）
S5iphone①將網頁調整權交給網頁（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;} }最后來個總結吧：印象最深的就是自適應的思維和物理學很近有木有！由于物體可以選取其他不同的東西做參考，所以物理書：“運動是絕對的，靜止是相對的”那遷移到這個代碼上也是一樣啦！網頁對應不同的屏幕標準得自動適應，那代碼就得采用相對的，而不是絕對的！
總結
以上是生活随笔為你收集整理的BODY background=自适应大小_自适应（电脑/平板/手机）网页，自适应网页设计练习总结...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 室外排水设计规范_XXZG排水汇集器完美
- 下一篇： 高斯-赛得尔迭代式 c++_高斯混合模型