99在线中文字幕|国内熟女高潮视频|成人性爰免费視頻|加勒比Av大轮奸|亚洲一区二区三区在线免费看|亚洲综合变态另类|av最新网站人妻无码高清|欧美成人网站一区|加勒比中文字幕亚洲伦理|免费精选黄网大全

400-114-0800

企業(yè)郵箱代理商、經(jīng)銷商

網(wǎng)建知識

您當前位置 > 首頁 > 文章欄目:網(wǎng)建知識

 

媒體查詢功能在網(wǎng)站設計當中的應用

發(fā)表時間:2014-04-04

?

作為從事金華微信網(wǎng)站設計的工程師們都知道CSS3支持CSS2.1所支持的所有媒體類型,例如屏幕顯示、打印設置和手提設備等,同時也增添了許多新媒體功能:包括最大寬度、設備寬度、屏幕定向和顏色選項。CSS3發(fā)布之后出現(xiàn)的新設備,比如iPad和Android設備,都完全支持這些屬性。因此,通過媒體查詢功能為這些新設備設置其樣式應該沒什么問題,我們暫時不考慮那些不支持CSS3的舊電腦瀏覽器。
?
?
QQ截圖20140404124321.jpg
?
?
?
如果瀏覽器在屏幕上呈現(xiàn)頁面(非打印類,等等),而且屏幕寬度(不非得是可視窗口)小于等于480像素,那就加載shetland.CSS樣式表。CSS3的新功能中也包括屏幕定向(橫屏和豎屏對比),設備寬度,最小設備寬度等等。我們可以創(chuàng)建多層樣式表,以及多種基本頁面布局以適應不同的寬度范圍。min.width(最小寬度)和max.width(最大寬度)兩個功能的發(fā)揮完全如其所說,min.width屬性能夠設置瀏覽器或屏幕的最小寬度值,然后可以應用某個特定的樣式表組合(或者獨立的樣式表)。如果一切低于這個限制,那么樣式表鏈接或樣式就可以忽略不計。而max-width功能剛好相反,如果高于特定瀏覽器或屏幕最大寬度值,都無法應用到相應的媒體查詢屬性。
?
雖然上述最大和最小寬度值都可以應用到屏幕與瀏覽器寬度中,我們有時候會希望媒體查詢作用于特定的設備寬度。這就是說不管瀏覽器或其他可視區(qū)有沒有最小化到某個較小的尺寸,媒體查詢?nèi)匀荒軌蜃饔糜谠O備的實際尺寸。最小設備寬度和最大設備寬度的媒體查詢屬性可用來很好地判斷設備屏幕尺寸,而不需要在瀏覽器中將相同的樣式應用到其他的全屏尺寸中,全屏尺寸由設備尺寸決定。
?
有些設計師也會傾向于為特定的媒體查詢使用獨立的樣式表格。如果結構利益高于效率損耗的話,這樣做也完全沒問題。對于那些無法切換屏幕定向,或無法手動改變?yōu)g覽器寬度的設備而言,使用獨立的樣式表應該是個不錯的選擇。比如,對于iPad這類設備,你或許會想將媒體查詢整合到一個樣式表中,因為這種設備可以實現(xiàn)橫屏豎屏隨意切換,如果這兩種媒體查詢分別放在獨立的樣式表中,用戶每次切換屏幕定向時,網(wǎng)站就得同時啟用每個樣式表文件。所以,將iPad的橫豎屏定向的媒體查詢整合在同一個樣式表文件中效率會更高。

隨機推薦查看更多