[day16]小老鼠媒體CSS3之Media Queries的實作與應用~平板、手機板頁面

[day16]小老鼠媒體CSS3之Media Queries的實作與應用~平板、手機板頁面

  1/01/2017    King Tzeng

---

### 無聊的時間寫了一個小程式，縮放視窗可以看目前套用的 @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....

-同步連載於"iT邦幫忙"鐵人賽活動系列文章[ 著作權為 Ying-chi Tzeng所有，轉載請告知～]