利用一點點的時間寫了一個小程式，縮放視窗可以看目前套用的 @media 樣式為何

DEMO連結在此：( http://ppt.cc/oylp7 )

昨天介紹了@media，今天利用一點點的時間寫了一個應用網頁～
在這個網頁裡，我設了三個判斷點，分別為

• 視窗大於768px 以上
• 480px~768px 之間
• 480px以下

可以看到附圖在視窗寬度在大於768px 以上的時候網頁的背景為橘紅色；
在480px~768px 之間時，網頁背景為淡綠色；
480px以下則為淡藍色；

這是因為Media Queries在不同的視窗寬度時，偵測媒體裝置的寬度而套用了不同的CSS！

程式碼如下：

 @media screen and(min-width: 768 px) {
  body {
    // 視窗大於[ 768px ]以上，套用此css;
  }
}

 @media screen and(max-width: 768 px) {
  body {
    // 視窗在[ 480px~768px ]之間，套用此css;
  }
}

 @media screen and(max-width: 480px) {
  body {
    // 視窗小於[ 480px ]，套用此css;
  }
}

了解Media Queries後，就可以很輕易的寫出RWD的網頁！

因此我們用Media Queries的特性，寫出3套CSS樣式表並運用在我們的個人網頁上 ↓

我露了一段螢幕錄影來展示縮放瀏覽器視窗的時候樣式都和平板、手機的介面一樣

• 電腦版為灰色背景
• 平板裝置為棕色背景
• 手機版則為紅色背景

連結附上（ http://tzeng17.com/ ）;

看官們可以用手機、平板、電腦看看網頁是否和我說的一樣喔～
這樣我們的RWD網頁就做好啦～ （好快XDD

對！其實沒有什麼困難的，但是就要有耐心慢慢調CSS讓頁面不要有破版的情形發生～

那接下來內頁的部分RWD也照此規則去做處理，這邊就不繼續講下去了～
把文章留給接下來的要說的頁面特效程式等等囉～（其實是我自己默默做就好了....

那到第16天把頁面的部分講解到此囉！謝謝收看！

文後-

平時沒有很常在寫CSS....真的要寫時感到好陌生，猛看W3school....

同步連載於blogger-"King 學習前端之人生"
[ 著作權為 Ying-chi Tzeng所有，轉載請告知～]