作為從事金華微信網(wǎng)站設(shè)計(jì)的工程師們都知道CSS3支持CSS2．1所支持的所有媒體類型，例如屏幕顯示、打印設(shè)置和手提設(shè)備等，同時(shí)也增添了許多新媒體功能：包括最大寬度、設(shè)備寬度、屏幕定向和顏色選項(xiàng)。CSS3發(fā)布之后出現(xiàn)的新設(shè)備，比如iPad和Android設(shè)備，都完全支持這些屬性。因此，通過媒體查詢功能為這些新設(shè)備設(shè)置其樣式應(yīng)該沒什么問題，我們暫時(shí)不考慮那些不支持CSS3的舊電腦瀏覽器。

?

?

?

?

?

如果瀏覽器在屏幕上呈現(xiàn)頁面(非打印類，等等)，而且屏幕寬度(不非得是可視窗口)小于等于480像素，那就加載shetland．CSS樣式表。CSS3的新功能中也包括屏幕定向(橫屏和豎屏對比)，設(shè)備寬度，最小設(shè)備寬度等等。我們可以創(chuàng)建多層樣式表，以及多種基本頁面布局以適應(yīng)不同的寬度范圍。min．width(最小寬度)和max．width(最大寬度)兩個(gè)功能的發(fā)揮完全如其所說，min．width屬性能夠設(shè)置瀏覽器或屏幕的最小寬度值，然后可以應(yīng)用某個(gè)特定的樣式表組合(或者獨(dú)立的樣式表)。如果一切低于這個(gè)限制，那么樣式表鏈接或樣式就可以忽略不計(jì)。而max-width功能剛好相反，如果高于特定瀏覽器或屏幕最大寬度值，都無法應(yīng)用到相應(yīng)的媒體查詢屬性。

?

雖然上述最大和最小寬度值都可以應(yīng)用到屏幕與瀏覽器寬度中，我們有時(shí)候會希望媒體查詢作用于特定的設(shè)備寬度。這就是說不管瀏覽器或其他可視區(qū)有沒有最小化到某個(gè)較小的尺寸，媒體查詢?nèi)匀荒軌蜃饔糜谠O(shè)備的實(shí)際尺寸。最小設(shè)備寬度和最大設(shè)備寬度的媒體查詢屬性可用來很好地判斷設(shè)備屏幕尺寸，而不需要在瀏覽器中將相同的樣式應(yīng)用到其他的全屏尺寸中，全屏尺寸由設(shè)備尺寸決定。

?

有些設(shè)計(jì)師也會傾向于為特定的媒體查詢使用獨(dú)立的樣式表格。如果結(jié)構(gòu)利益高于效率損耗的話，這樣做也完全沒問題。對于那些無法切換屏幕定向，或無法手動(dòng)改變?yōu)g覽器寬度的設(shè)備而言，使用獨(dú)立的樣式表應(yīng)該是個(gè)不錯(cuò)的選擇。比如，對于iPad這類設(shè)備，你或許會想將媒體查詢整合到一個(gè)樣式表中，因?yàn)檫@種設(shè)備可以實(shí)現(xiàn)橫屏豎屏隨意切換，如果這兩種媒體查詢分別放在獨(dú)立的樣式表中，用戶每次切換屏幕定向時(shí)，網(wǎng)站就得同時(shí)啟用每個(gè)樣式表文件。所以，將iPad的橫豎屏定向的媒體查詢整合在同一個(gè)樣式表文件中效率會更高。