二三往事

江湖一點訣，說破不值錢，最近很多網站都可以隨著視窗大小自動調整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