手機網站建設如何根據手機屏幕尺寸做不同的網頁
随著(zhe)3G的普及，越來越多的人使用手機上網。手機的屏幕比較小，寬度通常低服在600像素以下；PC的屏幕寬度，一般都(dōu)在1000兵件像素以上（目前主流寬度是1366×76購錯8），有的還(hái)達到(dào)了2000像素。同樣(y下弟àng)的内容，要在大小迥異的屏幕上，都(dōu)呈現出滿意不錢的效果，并不是一件容易的事(shì)。于是，網頁設近民計師不得不面(miàn)對(duì)一個難題：如何才能(n還公éng)在不同大小的設備上呈現同樣(yàng)的網頁？
很多網站的解決方法，是為不同的設備提供國城不同的網頁，比如專門提供一個mobile版本，或者iPh爸體one / iPad版本。這(zhè)樣(yàng)做門能固然保證了效果，但是比較麻煩，同時(shí)要維護好(hǎo)幾個版本師冷，而且如果一個網站有多個portal（入口），會(huì)大大中姐增加架構設計的複雜度。于是，很早就(jiù)有人設想，能(n金北éng)不能(néng)"一次設計，普遍适用"西廠;，讓同一張網頁自動适應不同大小的屏幕，根據屏幕寬度，自動調整布局（layou可吃t）？
一、允許網頁寬度自動調整
"自适應網頁設計"到(dào)底是怎麼(me)做到大美(dào)的？其實并不難。
首先，在網頁代碼的頭部，加入一樂看行viewport元标簽。
viewport是網頁默認的寬度和區內高度，上面(miàn)這(zhè)行代碼的意思是，月海網頁寬度默認等于屏幕寬度（wid微少th=device-width），原始縮放比例（initial-s少暗cale=1）為1.0，即網頁初始大小占屏幕面(miàn)積的100%。
所有主流浏覽器都(dōu)支持這(zhè)個設置，包括IE9。對(duì)于個章那些老式浏覽器（主要是IE6、7、8），需要使用css3-medi樹現aqueries.js。
三、不使用絕對(duì)寬度
由于
手機網站建設的網頁會(huì)根據屏幕寬度調整布局，所以不能(néng花亮)使用絕對(duì)寬度的布局，也不能(né火路ng)使用具有絕對(duì)寬度的熱分元素。這(zhè)一條非常重要。
具體說(shuō)，CSS代碼不能(néng)指定像素寬路西度：
width:xxx px;
隻能(néng)指定百分比寬度：
width: xx%;
或者
width:auto;
四、相對(duì)大小的字體
字體也不能(néng)使用絕對(duì)大小（px），而隻能(néng)使北喝用相對(duì)大小（em）。
body {
font: normal 100%日黃 Helvetica, Ari了高al, sans-serif;
}
上面(miàn)的代碼指定，字體大小是頁面(mi笑公àn)默認大小的100%，即16像素。
h1 {
font-size: 1.5em;
}
然後(hòu)，h1的大小是默認大小的司山1.5倍，即24像素（24/16=1.5讀吃）。
small {
font-size: 0.875em;
}
small元素的大小是默認大小的0.875倍，即14像素（14/16=0.子我875）。
五、流動布局（fluid grid）
"流動布局"的我多含義是，各個區塊的位置都(dō友亮u)是浮動的，不是固定不變的。
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
float的好(hǎo)處是，如果寬度太小，放不下兩(liǎng)個元素，後時化(hòu)面(miàn)的元素會(huì)自動滾動到(dà離秒o)前面(miàn)元素的下方，不會(huì)在水平方向(xiàng師歌)overflow（溢出），避免了水平滾動條的出現友機。
另外，絕對(duì)定位（position: absolute）的使近要用，也要非常小心。
六、選擇加載CSS
"自适應網頁設計"的核心，就(jiù)短草是CSS3引入的Media Qu海票ery模塊。
它的意思就(jiù)是，自動探測屏幕寬度，然後(hòu白筆)加載相應的CSS文件。
media="screen and (max-舞在device-width: 40地白0px)"
href="資水tinyScreen.css" />
上面(miàn)的代碼意思是，如快做果屏幕寬度小于400像素（max-device-width: 400px問北），就(jiù)加載tinyScreen.css文件。
media="screen and (min-船區width: 400px) and (max-devic空現e-width: 600px)&q日靜uot;
href="sma中問llScreen.css" />飛請
如果屏幕寬度在400像素到(dào)600像拍看素之間，則加載smallScreen.css文件。
除了用html标簽加載CSS文件，還(hái)可以在現有CSS文件中雪是加載。
@import url("煙化tinyScreen.css") screen and (視章max-device-width: 400px);
七、CSS的@media規則
同一個CSS文件中，也可以根據不同的屏志輛幕分辨率，選擇應用不同的CSS規則。
@media screen and (max-devic店報e-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
上面(miàn)的代碼意思是，如果屏幕寬度小于400像素，則co請劇lumn塊取消浮動（float:none）從靜、寬度自動調節（width:auto），sidebar塊不多水顯示（display:none）。
除了布局和文本，"自适應網頁設計"還(hái)必須實現圖慢器片的自動縮放。
這(zhè)隻要一行CSS代碼：
img { max-width: 100%;}
這(zhè)行代碼對(duì)房國于大多數嵌入網頁的視頻也有效，所以可以寫成(chéng)：
img, object { max-wi房兵dth: 100%;}
老版本的IE不支持max-width，所月習以隻好(hǎo)寫成(chéng)：
img { width: 100%時拍; }
此外，windows平台縮放圖片時(sh到嗎í)，可能(néng)出現圖像失真現象。這(zhè)紅唱時(shí)，可以嘗試使用IE的專有命時家令：
img { -ms-interpolation-mode: bi區車cubic; }
或者，Ethan Marcotte的imgSizer.js。
addLoadEvent(functio拍司n() {
var imgs = document.getEle弟路mentById("content").飛科getElementsByTagNa又師me("img");
imgSizer.collate(imgs);
});
不過(guò)，有條件的話，最好(hǎo)還(hái)什她是根據不同大小的屏幕，加載不同分辨率的圖片。有很多方法可見說以做到(dào)這(zhè)一條，服站金務器端和客戶端都(dōu)可以實現。
以上電知内容由山東富貴通網絡科技有限公司提供：企業官網網站建設、光關響應式網站定制、H5網站開(kāi)發(fā)、商城城銀網站建設、營銷型網站建設、行業網站建設、電商平台建設、SEO優化、微網站技都、微營銷、手機站、四站合一、微營銷、微信公衆平台開(kāi)發(技為fā)、微信代運營、微商城、三級分銷系統、服務器租賃、域名申請、數對來據存儲、協同辦公等網站建設系列服務。
更多請關注官網：
www.fukuwang.com
www.1000531.cn
www.cnchengwang.com
www.chengwang.net
