html5中的媒體查詢
作者：佚名 時間：2014-06-06 分享到：
在我看來,在網站設計領域,媒體查詢一直是多年最大的促變因素-大概是因為css本身已成為主流,css的廣泛采用允許我們拋棄那些剛性限制的基于表單的網站;然而,媒體查詢又使我們再前進一步,用它設計出的網頁能支持各種用以顯示網站的設備規格.
媒體查詢是邏輯語句,如果邏輯是正確的,在語句中的樣式規則就會被應用,如果邏輯是錯誤的,規則就會跳過,語句的參數被稱為媒體功能,如今最常用的參數與設備或窗口的尺寸相關,在詳細討論媒體功能之前,讓我們來看看如何使用它們.
媒體查詢擴展了css2.1和html5.01使用媒體類型語法-請記住,就是這種語法,允許調用依賴于媒體的樣式,例如,當鏈接到外部樣式表單時:
<link rel="stylesheet" href="foo.css" media="screen">
只有當查看設備是屏幕時,此代碼才調用外部樣式表foo.css-換句話說,如果是其他的媒體類型,例如,打印,那就不行,要想擴展此語法,我們只需添加and這個詞,再把query放在括號中加在后面:
<link rel="stylesheet" href="foo.css" media="screen and (query)">
這個被修改后的代碼要同時滿足兩個條件,第一,媒體類型應該是一個屏幕;第二,媒體查詢的邏輯應該是正確的,如果這兩個條件都滿足,則可以應該foo.css
通過@import at-rule,我們還可以運用媒體查詢,把其他樣式表單中的外部樣式表包括在內,下面這個代碼和上面的代碼邏輯相同,但它可以用于樣式標記或外部樣式表單中:
@import url("foo.css") screen and (query);
如沒特殊注明，文章均為上海聯楷網絡原創,轉載請注明來自：http://www.ktcbnqb.cn/help/20151126/n1801.html
