手機網頁示例1——通過CSS的寬度百分比設置達到頁面自適應效果

手機網頁與傳統PC網頁存在很大區別的一點在於頁面展示。
PC網頁在佈局方面常常會在兩邊“留白”——比如把網頁的主要內容居中,然後兩邊通常不做佈置(只是顯示背景)。這是因爲PC屏幕大,屏幕能顯示的內容多,網頁設計者當然可以把需要展示的內容僅僅放到頁面中間就基本足夠了,而且這樣還能夠讓頁面顯得美觀、整潔。
而對於手機網頁,手機屏幕的尺寸本來就比較小。所以通常手機網頁的佈局都不會在頁面兩邊留白。設計者總是儘量讓頁面信息量鋪滿屏幕。又由於手機屏幕無論是在分辨率還是尺寸上都沒有一個統一的標準,所以對於手機網頁,設計者通常的做法是讓手機頁面“實現自適應”——也就是遇到大屏,我的頁面就能夠自動適應放大去填充大屏;遇到小屏我也能夠自動縮小而不會超出屏幕。
下面的示例是一個簡單的php+css的手機網頁。
先來看看這個頁面的php(html)結構。分爲9個模塊,代表頁面裏的9個方塊。如下圖所示。一個div代表一個模塊。

再來看看這個頁面的css代碼:
.introductionBig{
	float:left;
	width:50%;
}

.introductionBig img{
	width:100%;
}

.introductionSmall{
	float:left;
	width:25%;
}

.introductionSmall img{
	width:100%;
}

body{
background-color: #000;
}


很簡單的代碼。基本上需要注意的有兩點:
1. 將所有div元素都設置爲float:left,這樣這些方塊就能夠整齊地自左向右排列好,一旦佔據完某一行,就自動跳到下一行繼續有序排列。
2. 使用百分比來設置寬度。“width:百分比” 的css設置會讓頁面達到前面提到的適應不同大小屏幕“伸縮自如”的效果。css的百分比設置是對應於父元素的。缺省下,外層的元素層層繼承上級,佔據頁面100%的寬度。這個時候,introductionBig的div設置了50%,表現到頁面上就是那些諸如“店長推薦”、“最新優惠”的大方塊佔據了頁面一半的寬度;而introductionSmall,也就是那些小方塊,設置爲佔據頁面1/4的寬度。此外,注意img的寬度設置爲100%,因爲img的父元素是div,所以其百分比是對應於外面的introductionBig或introductionSmall的,100%表示佔滿他們所在的div。高度不需要設置,這樣一來,圖片就不會變形——高度會根據圖片的原始比例進行自動調整。
這樣的html+css的佈局能夠保證在ie7 8 9以及ff下顯示正常,並達到我們前文提到的適應手機不同屏幕大小的效果。我在實踐的過程中曾經犯過這樣的錯誤——把那幾個小的方塊,也就是introductionSmall放到了一個introductionBig中,結果在ff下顯示也正常,但是到了ie中就出現各種錯誤——小方塊們越來越小。這個是題外話了。有興趣的同學可以另外試試。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章