[day15]改變策略！之手刻網頁使用@media製作RWD個人網站－平版、手機版(更新中..)

[day15]改變策略！之手刻網頁使用@media製作RWD個人網站－平版、手機版(更新中..)

  12/31/2016    King Tzeng

---

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






首先先來介紹 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)媒體的能力，而不是偵測這是什麼裝置、機種

舉例來說：

• 瀏覽器視窗的寬度和高度
• 設備裝置的寬度和高度
• 設備裝置的方向（是平板電腦/手機在橫向或縱向模式？）
• 解析度

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

在CSS上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的判斷點

以Bootstrap的角度來看

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

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

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

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

所以@media可以做很多應用，舉凡RWD、螢幕上的縮放特效、列印網頁等等....都可以使用@media去作裝置的運用！

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

謝謝收看～

-----

文後-

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

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