Welcome! 登入 註冊
美寶首頁 美寶百科 美寶論壇 美寶落格 美寶地圖

Advanced

[CSS/IE6] 跨瀏覽器:畫面動態調適視窗大小(max-width)同時讓背景圖片(backgroun-image)正常顯示的方法

1. 情境說明

我們經常將網頁固定為某個寬度,例如:

#container{
width: 928px;
}

但這樣的設定在電腦的視窗變窄或者在行動裝置上時就會顯得太大,而可能難以閱讀。

例如以美寶莊園地圖為例,在正常視窗大小時內容可完整呈現:



但寬度縮為 360px 時,內容變得不好理解而難以操作:


2. 改善方法:加入 max-width 及 _width (IE6) 的設定

在相關的 block 中設定 CSS,將寬度改為可動態調整:
#container{ max-midth: 928px; /* CSS 標準語法 */ _width:expression((documentElement.clientWidth >928) ? "928px" : "auto"); /* IE6 特有語法*/ margin: auto; /*此為「水平置中」的語法,若有需要可加上*/ }
調整後結果:


可以看到「美寶莊園地圖」和內容部份都能動態調整大小並置中。但美中不足的是美寶莊園的「頂圖」部份沒有辦法看到代表網站形象的「LOGO」。這個部份的解決辦法在下一步驟說明。

3. 改善頂圖 LOGO 的呈現:設定 background-position (CSS)

頂圖 LOGO 無法出現主因是背景圖片 (background-image) 一般是水平置左,而例子中的美寶莊園 LOGO 是位於頂圖的「右側」,所以無法呈現。

我們只要將頂圖的設定改為「置右」即可:
#header{ background-image: url(imgs/wiki_top.jpg); background-position: right top; } #header{ /* 簡寫 */ background: url(imgs/wiki_top.jpg) right top; }
修改後可見頂圖 LOGO 已成功呈現:


以上為美寶莊園地圖(與百科)為了「動態調適視窗大小」而作的一系列的改善步驟,希望對讀到這篇文章的人有所幫助!


參考資料:
1. ie6实现min-width/max-width http://blog.feshine.net/technology/367.html
2. Placing a CSS background image horizontally right on an h2 using a span element (2009)



Edited 2 time(s). Last edit at 09/06/2011 01:51AM by HP.
(編輯記錄)