Responsive Web Design

江湖一點訣,說破不值錢,最近很多網站都可以隨著視窗大小自動調整div的尺寸跟內容的位置,讓同一個網站在手機跟網站上都可以看得很舒適,這叫做Responsive Web Design。

看起來很炫,其實方法很簡單,只是在寫CSS時多下面這個東西而已。

@media screen and (max-width: 600px)
{
/*手機板的網頁*/
div.surl-link
{
width:100%;
float:none;
}
}

當螢幕尺寸在600px以下的時候,就會套用那些css的設定,所以只需要把手機板該做的調整加在那邊就好,最常做的通常是把不重要的div設成display:none;。

至於有的人跑來問說「要怎麼把舊的網頁輕輕鬆鬆的改成手機版網頁」,會問這種問題的,通常那個網頁已經沒救了,因為「寫個桌機的網頁」跟「寫個能兼容桌機跟手機的網頁」在設計時的概念就已經不一樣了,重寫或許還比較省事………

Responsive Web Design DEMO: f23.tw


 © 2024 - 二三往事