現在行動裝置越來越普及(如:平板電腦或手機),HTML網頁也越來越貼近你我,網頁的呈現方式也開始有了變化,如果網頁能隨著不同的顯示尺寸而改變顯示方式,就不用兩隻手指滑來滑去(搞不好有人喜歡這樣滑),JAVA可以做到這點,可惜我不會,現在CSS也可以做到,而且還很簡單,對於程式苦手的我也會了,但這招有個缺點那就IE6、7、8不支援>”<,好家在PDA手機不裝IE,不說廢話先來瞧瞧程式碼。

<link rel="stylesheet" href="style.css"  type="text/css" />
<link rel="stylesheet" media="screen and (max-width: 799px)" href="widht320.css"  />
<link rel="stylesheet" media="screen and (min-width: 800px) and (max-width: 959px)" href="widht800.css"  />
<link rel="stylesheet" media="screen and (min-width: 960px)" href="widht960.css"  />

來解釋一下,其實也沒啥好解釋的,只是在CSS連上加上了這一段media=”screen and (max-width: 799px)” 注意括弧部分,有max與min的區別,用來判斷網頁的尺寸,最大尺寸與最小尺寸,要使用那個CSS,很簡單吧!下方DEMO大家研究看看吧。

DEMO

補上圖片,可以按下DENO拉拉瀏覽器的框,改變瀏覽器的寬度看變化。

  CSS3MediaQueries Demo下載 (192.0 KiB, 851 hits)

最後修改日期: 2019 年 2 月 21 日

留言

我收到一封david的mail,信件內容如下; 寄件人:david 主旨: 請教一個問題! 訊息: Hi 我正在煩惱要如何達成這個效果: http://www.kentlyons.com/ 當你改變視窗大小的時候,背景照片會跟著視窗比例改變尺寸以確保可以看到完整的背景。 看了你的”用CSS3查詢網頁大小,改變網頁顯示佈局” 效果很相似但不是用在圖片上,想請教你知不知道這效果怎麼做? 感謝! ——————————————————————————————– 在這回答你的問,我會寄mail請你回來看,不會在mail回答你的問題,因該也有人跟你有一樣的問題,大家交流一下,雖然已跟這篇文章離題。 來說說網頁需要那些東西來組成,依你所給的網址的網頁來說,這個網頁(html)是由css、javascript(js)、PHP,所組成你所看到的網頁(我就不解釋這三個東西拉),網頁的背景圖片會所著瀏覽器而改變顯示大小,完全與CSS無關,它是靠網頁裡的6支JS去動作的,由於我對JS沒有深入研究,就告訴你怎麼套它的JS,用瀏覽器檢視網頁程式碼,你會看到下面五支外連的JS,jquery-1.3.2.min.js、effects.core.js、effects.slide.js、jquery.maximage.js、kl.js,有一支是直接寫在網頁上沒外連,將這些JS抓下來與複製下在後,貼到你的要做的網頁上,在複至網頁程式碼內的div id=”mainContent”內的圖片連結的程式碼(包含DIV),貼到你要做的網頁上,將圖片換張1680×1024圖片,就可以看到跟他樣的效果。 套別人的程式有個缺點,就是會出現BUG,除非自己會修,不會除BUG,等到BUG出現你也只能吧這效果拿掉。 後面你就自己研究看看吧 DEMO

Hi NoneLin 多謝你的回覆和demo,我試試之後再告訴你果。 感謝!

我先用替換圖的方式套用你的demo, 然後再來慢慢研究細節… 非常謝謝你的幫忙!

留言功能已關閉。