@media

標籤：style   blog   http   color   使用   io   ar   cti   

構：

@media  all and( min-width:600px){

樣式表:即

.mainbox{ background:#fff000;}

}

all可指定的值：

樣式表：

使用and關鍵字來指定當某種裝置類型的某種特性的值滿足某個條件時所使用的樣式，譬如以下語句指定了當視窗寬度小於640px時所使用的樣式：
@media screen and (max-width:639px){樣式代碼}
可以使用多條語句來將同一個樣式應用於不同的裝置類型和裝置特性中，指定方式類型如下所示：
@media handled and (min-width:360px),screen and (min-width:480px){樣式代碼}
可以在運算式中加上not關鍵字或only關鍵字，not關鍵字表示對後面的運算式執行取反操作，書寫方法如下所示：

@media not handled and (color) {樣式代碼}
//樣式代碼將被使用在所有非彩色裝置中
@media all and (not color)
only關鍵字的作用是，讓那些不支援Media Queries但是能夠讀取Media Type的裝置的瀏覽器將運算式中的樣式隱藏起來。例如，對於如下的語句來說：
@media only screen and (color){樣式代碼}
對於支援Media Queries的裝置來說，將能夠正確的應用樣式，就彷彿only不存在一樣。對於不支援Media Queries便能夠讀取Media Type的裝置（譬如IE8隻支援"@media screen"）來說，由於先讀取到的是only而不是screen，將忽略這個樣式。
對於不支援Media Queries的瀏覽來說，無論是否有only，都將忽略這個樣式。
CSS3中的Media Queries模組中也支援對外部樣式表的引用，使用方法類似如下表示：
@import url(color.css) screen and (min-width:1000px)