您好,登錄后才能下訂單哦!
小編給大家分享一下CSS3中多媒體查詢的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
CSS2多媒體查詢:
@media規則在css2中有介紹,針對不同媒體類型(包括顯示器,便攜設備,電視機,等等)可以定制不同的樣式規則。
CSS3多媒體查詢:
CSS3多媒體查詢繼承了CSS2多媒體類型的所有思想,取代了查找設備的類型,CSS3根據設置自適應顯示。
多媒體查詢可以檢查很多事情:viewport(視圖)的寬和高,設備的寬和高,朝向,分辨率。
查詢語法:
@medianot|only|allmediatypeand(expressions){ css-sode; }
not:排除某類型設備,only:只有某類型設備,all:所有的設備。
可以在不同的媒體上使用不同的樣式文件:
<link rel="stylesheet" media="mediatypeand|only|all(expressions)" href="print.css"/>
媒體類型:
all所有媒體
print打印機
screen電腦,平板,手機
speech屏幕閱讀器
媒體功能:
device-width/height:設備屏幕可見寬度/高度
height,width:頁面可見區域高,寬
max-device-width/height:屏幕可見最大寬度、高度。
以上是“CSS3中多媒體查詢的示例分析”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。