pc端和移動端共用一套代碼
1. 容許網頁寬度自動調整
在網頁代碼的頭部,加入一行viewport元標籤
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
全部主流瀏覽器都支持這個設置,包括IE9。對於那些老式瀏覽器(主要是IE六、七、8),須要使用
css3-mediaqueries.js
2. 不使用絕對寬度
因爲網頁會根據屏幕寬度調整佈局,因此不能使用絕對寬度的佈局,也不能使用具備絕對寬度的元素。這一條很是重要,能夠用
width:~%
或者
width:auto;
3. 相對大小的字體
- 字體也不能使用絕對大小(px),而只能使用相對大小(em)
body {
font:normal100%Helvetica,Arial,sans-serif;
}
- 上面的代碼指定,字體大小是頁面默認大小的100%,即16像素
h1{
font-size:1.5em;
}
- 而後,h1的大小是默認大小的1.5倍,即24像素(24/16=1.5)
small{
font-size:0.875em;
}
- small元素的大小是默認大小的0.875倍,即14像素(14/16=0.875)
4. 流動佈局fluidgrid
「流動佈局」的含義是,各個區塊的位置都是浮動的,不是固定不變的
.main{
float:right;
width:70%;
}
.leftBar{
float:left;
width:25%;
}
float的好處是,若是寬度過小,放不下兩個元素,後面的元素會自動滾動到前面元素的下方,不會在水平方向overflow(溢出),避免了水平滾動條的出現,另外,絕對定位
(position:absolute)
的使用,也要很是當心
5. 選擇加載CSS
「自適應網頁設計」的核心,就是CSS3引入的MediaQuery模塊
<media="screenand(max-device-width:400px)" href=」tinyScreen.css」/>
若是屏幕寬度在400像素到600像素之間,則加載smallScreen.css文件
6. CSS的@media規則
同一個CSS文件中,也能夠根據不一樣的屏幕分辨率,選擇應用不一樣的CSS規則
// 屏幕寬度小於400像素
@mediascreenand(max-device-width:400px){
.column{
float:none;
width:auto;
}
#sidebar{
display:none;
}
}
7. 圖片的自適應(fluidimage)
圖片的自動縮放
img,object{max-width:100%;}
老版本的IE不支持max-width,因此只好寫成
img{width:100%;}
windows平臺縮放圖片時,可能出現圖像失真現象。這時,能夠嘗試使用IE的專有命令:
img{-ms-interpolation-mode:bicubic;}
或者,
EthanMarcotte
的
imgSizer.js
addLoadEvent(function(){
varimgs=document.getElementById(「content」).getElementsByTagName(「img」);
imgSizer.collate(imgs);
});