前篇做好了電腦版，這邊說好的要來一次解決平板和手機版的頁面呈現

首先先來介紹Media Queries是什麼呢？

引用自w3schools的介紹(http://www.w3schools.com/css/css3_mediaqueries.asp)

CSS3 Introduces Media Queries

Media queries in CSS3 extend the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device.

• Media queries can be used to check many things, such as:
• width and height of the viewport
• width and height of the device
• orientation (is the tablet/phone in landscape or portrait mode?)
• resolution

Using media queries are a popular technique for delivering a tailored style sheet to tablets, iPhone, and Androids.

從字面上來看

Media → 媒體
Queries → 查詢

Media Queries是具有偵測設備(device)媒體的能力，而不是偵測這是什麼設備、機種等

舉例來說：

• 瀏覽器視窗(viewport of web page)的寬度和高度
• 設備裝置(device)的寬度和高度
• 設備裝置的方向（平板電腦or手機? 橫向or縱向模式？）
• 解析度

普通前三點是我們最常使用到的功能～

而在CSS3上Media Queries的語法為

@media 媒體類型 and (判斷式) {
    CSS Code寫在此;
}

媒體類型（Media Type）分成四種：

• all 適用於各種媒體類型的設備
• print 適用於列印上
• screen 適用電腦螢幕、平板、智慧型手機上等等（常用）
• speech 用於在需要"閱讀"的頁面上 ←我想應該是無障礙空間吧？

判段式的部分我們舉例來說，通常我們設平板的判斷點為 → 視窗寬度 ≦ 768px為平板裝置

Media Query的寫法為

媒體類型 為 平板 → screen
判段式 為 當螢幕小於768px時做動作 → max-width: 768px

範例寫法為↓↓

@media screen and (max-width: 768px) {
   當螢幕寬度 < 768 px 時將載入這段 CSS;
}

所以說媒體的螢幕判斷點設定相當的重要啊！

如果判斷式的像素太大等於沒設斷點，如果判斷式的像素太小又會造成始終讀不到

小妹在這邊教大家可以參考Bootstrap的判斷點 XDD

以Bootstrap的角度來看

（圖片截取自：https://kkbruce.tw/bs3/CSS）

可以看到Bootstrap的關鍵判斷點有四個
媒體的寬度分別為

• 手機 → 768px以下
• 平板 → 768px ~ 992px 區間
• 普通電腦版 → 992px ~1200px 區間
• 高清電腦版 → 1200px以上

@media在媒體寬度分別為以上關鍵判斷點時做載入@media括號內的動作

那這邊介紹Media Queries的特性與應用，下一篇來實作與應用Media Queries的特性給大家看囉～

謝謝收看～

文後-

在google上搜尋 Media Queries 第一頁前幾篇文章講解的都不錯喔～

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