自適應(電腦/平板/手機)網頁,自適應網頁設計
一、面臨問題:網頁在電腦上完全顯示,但在手機上顯示不完全(需要左右拉動才看得到其他部分)
例如:下面這個簡易的網頁,為加入自動適應之前,電腦和手機開啟都是下圖效果,電腦上顯示看上去效果不錯,但手機上需要左右拉動才可以看到網頁其他部分,那如何解決這個問題呢?
二、解決問題
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;
}
}
最後來個總結吧:印象最深的就是自適應的思維和物理學很近有木有!由於物體可以選取其他不同的東西做參考,所以物理書:“運動是絕對的,靜止是相對的”那遷移到這個程式碼上也是一樣啦!網頁對應不同的螢幕標準得自動適應,那程式碼就得采用相對的,而不是絕對的!