Ming Apps

Dynamic Layout? CSS3 Media Query

Posted on: 2011/04/26

網址: CSS3 media queries

css3 media queries screenshot

編寫行動版的網頁上,

一向的做法多是利用兩個domain,

例如yahoo.com以及m.yahoo.com這種方式,

跟著便著手設計兩邊的網頁介面~

有些人覺得麻煩,

何解mobile version的網頁,和本來的網頁要分開設定和設計,

何不將之合併?

CSS3 media query應運而生了~!

大家試到以下的網頁~

http://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign

http://colly.com/

http://www.edmerritt.com/

http://2010.dconstruct.org/

然後試試將你的瀏覽器(Browser)的闊度(Width)縮小。

你會發現,

他們每一個介面都會隨著不同的大少而改變Layout Design!

有的將Menu移位由右到頂,

有的索性將背景圖片隱藏,

整個頁面變成只可上下拉動~

是否很有趣呢?

原來他們正運用了CSS3 Media Queries的技巧,

在瀏覽器不同闊度的情況下顯示不同的CSS~

聽起來Concept很簡單,

但,

辛苦了UI Designer了吧?

教學方面大家可以到這個中文教學:QK-style的網站!~

英文的則可以到這個Fun with Chameleon~

寫的教學簡單清楚~

馬上試試看~!

標籤: , , ,

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s

%d 位部落客按了讚: