【往F2E這個路子走】Media Queries - Part 1

Media Queries 是 Responsive Design的核心所在，
倘若沒有Media Queries，
那CSS大概就沒辦法讓我們搞出這麼多花樣來迎合使用者需求嚕～
所以咱門來好好學習一下吧！！

 Media Queryies基本上分成兩個部分：Media Types和Media Expression。 

先說說Media Types吧！
其實早期在CSS2.1 (現在我們都用CSS3.0)的時候，
就已經有定義多達10種的Media Types囉！（我完全不知道這件事...糗）
而一般通常我們常常遇到的有三種：all, screen 和 print。（為啥我覺得我也沒常常遇到...畢竟之前是稿後端的關係？）

以前的設定基本上就是定義在我們的CSS連結標記中，
像是以下的寫法：
<link rel="stylesheet" type="text/css" href="all.css" media="all" />
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

或者是說我們把print設定在CSS file裡面這樣：
@media print {
        /*  print styles go here  */
}

那這樣把Media Types定義好事有啥好處哩？
好處不外乎是：讓人家知道好處理不用在那裏猜猜猜啊啊啊啊～
Media Types先設定好可以減少額外的HTTP requests，
所以就會讓網頁的執行效率上更為提升，
但若你要問我為啥會減少HTTP requests？
抱歉書上沒說我也不知道....（真糟）
總之就先知道就好咩....

而且而且啊，
如果先設定好Media Types向上面一樣把它分開來多個檔案，
就可以不用下載其他一堆不相關的CSS設定，
阿捏不是非常之好咩～？
（就像是你要Mobile device下載print的類似設定好像通常就沒必要啊啊啊啊啊啊～）

好的，
像以前這樣如果你有先設定好Media Types，
那將會讓網頁執行效率有所提升，
但是問題來了....
一個網頁他奶奶的只能設定一個Media Type啊啊啊啊啊～
啊如果我是設定給Desktop裝置使用的，
那Mobile裝置用起來就會卡卡的啊～
這樣我有跑得飛快的執行效率也是沒用啊啊啊啊～（崩潰）

所以，
Media Queries天女下凡了～
讓她來拯救你！！
（鋪梗鋪好久...）

下一篇待續....我英文不好看文章很慢要慢慢咀嚼慢慢寫...還寫錯！！T_T