騰訊企業郵箱杭州客戶見面會舉辦成功
2015 年5月12日下午2點，2015年騰訊企郵客戶見面會杭州站在杭州天元酒... ...
網建知識
媒體查詢功能在網站設計當中的應用
發布日期：2014-04-04
?
作為從事金華微信網站設計的工程師們都知道CSS3支持CSS2．1所支持的所有媒體類型，例如屏幕顯示、打印設置和手提設備等，同時也增添了許多新媒體功能：包括最大寬度、設備寬度、屏幕定向和顏色選項。CSS3發布之后出現的新設備，比如iPad和Android設備，都完全支持這些屬性。因此，通過媒體查詢功能為這些新設備設置其樣式應該沒什么問題，我們暫時不考慮那些不支持CSS3的舊電腦瀏覽器。
?
?
?
?
?
如果瀏覽器在屏幕上呈現頁面(非打印類，等等)，而且屏幕寬度(不非得是可視窗口)小于等于480像素，那就加載shetland．CSS樣式表。CSS3的新功能中也包括屏幕定向(橫屏和豎屏對比)，設備寬度，最小設備寬度等等。我們可以創建多層樣式表，以及多種基本頁面布局以適應不同的寬度范圍。min．width(最小寬度)和max．width(最大寬度)兩個功能的發揮完全如其所說，min．width屬性能夠設置瀏覽器或屏幕的最小寬度值，然后可以應用某個特定的樣式表組合(或者獨立的樣式表)。如果一切低于這個限制，那么樣式表鏈接或樣式就可以忽略不計。而max-width功能剛好相反，如果高于特定瀏覽器或屏幕最大寬度值，都無法應用到相應的媒體查詢屬性。
?
雖然上述最大和最小寬度值都可以應用到屏幕與瀏覽器寬度中，我們有時候會希望媒體查詢作用于特定的設備寬度。這就是說不管瀏覽器或其他可視區有沒有最小化到某個較小的尺寸，媒體查詢仍然能夠作用于設備的實際尺寸。最小設備寬度和最大設備寬度的媒體查詢屬性可用來很好地判斷設備屏幕尺寸，而不需要在瀏覽器中將相同的樣式應用到其他的全屏尺寸中，全屏尺寸由設備尺寸決定。
?
有些設計師也會傾向于為特定的媒體查詢使用獨立的樣式表格。如果結構利益高于效率損耗的話，這樣做也完全沒問題。對于那些無法切換屏幕定向，或無法手動改變瀏覽器寬度的設備而言，使用獨立的樣式表應該是個不錯的選擇。比如，對于iPad這類設備，你或許會想將媒體查詢整合到一個樣式表中，因為這種設備可以實現橫屏豎屏隨意切換，如果這兩種媒體查詢分別放在獨立的樣式表中，用戶每次切換屏幕定向時，網站就得同時啟用每個樣式表文件。所以，將iPad的橫豎屏定向的媒體查詢整合在同一個樣式表文件中效率會更高。
隨機推薦查看更多
網站備案：