[css] media query的呼叫方法

media query要支援CSS3才能正常作業，IE8以下則不支援，
在這邊media query的呼叫方法有以下幾種：

1、在html中呼叫css檔案
<link rel="stylesheet" media="screen and (min-width:400px) and (max-width:700px)" href="main.css" />

2、使用@import方法
@import "main.css" screen and (min-width:400px) and (max-width:700px)

3、直接寫在CSS檔裡面
@media screen and (min-width:400px) and (max-width:700px) {
    a {
  color:blue;
  }
}

以上範例(min-width:400px) and (max-width:700px)是說
當視窗寬度在400px~700px時，會套用css檔，
而最多人使用當然是第三種了。


除了width之外，還有一個device-width可以使用，如
@media screen and (max-device-width:700px) {
  a {
  color:blue;
    }
}
以上範例(max-device-width:700px)是說
當裝置寬度在700px時，會套用css檔

media query中，以上這兩個有何不同?
我們可以使用min-width和max-width來判斷使用者視窗的寬度，
而min-device-width和max-device-width則是使用者裝置的最大寬度，
所以device-width大部分是用在判斷手機寬度。