您好,登錄后才能下訂單哦!
今天小編給大家分享一下css3中media媒體查詢器怎么用的相關(guān)知識點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
在css3中,media媒體查詢用于針對不同的媒體類型或者設(shè)備定義不同的樣式,可以針對不同的屏幕尺寸或者分辨率設(shè)置不同的樣式,語法為“@media not|only 媒體類型 and (...){CSS樣式代碼}”。
本教程操作環(huán)境:windows10系統(tǒng)、CSS3&&HTML5版本、Dell G3電腦。
使用 @media 查詢,你可以針對不同的媒體類型定義不同的樣式。
@media 可以針對不同的屏幕尺寸設(shè)置不同的樣式,特別是如果你需要設(shè)置設(shè)計(jì)響應(yīng)式的頁面,@media 是非常有用的。
當(dāng)你重置瀏覽器大小的過程中,頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面。
媒體查詢可用于檢查許多事情,諸如:
視口的寬度和高度
設(shè)備的寬度和高度
方向(手機(jī)或平板電腦處于橫屏還是豎屏模式?)
分辨率
語法為
@media not|only mediatype and (mediafeature and|or|not mediafeature) { CSS-Code; }
not、only 和 and 關(guān)鍵字的含義:
not:not 關(guān)鍵字反正整個(gè)媒體查詢的含義。
only:only 關(guān)鍵字可防止舊版瀏覽器應(yīng)用指定的樣式,這些瀏覽器不支持帶媒體特性的媒體查詢。它對現(xiàn)代瀏覽器沒有影響。
and:and 關(guān)鍵字將媒體特性與媒體類型或其他媒體特性組合在一起。
它們都是可選的。但是,如果使用 not 或 only,則還必須指定媒體類型。
您還可以針對不同的媒體使用不同的樣式表,就像這樣:
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css"> <link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
示例如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> body { background-color:lightgreen; } @media screen and (max-width: 300px) { body { background-color:lightblue; } } </style> </head> <body> <p>重置瀏覽器查看大小。當(dāng)瀏覽器窗口的寬度小于 300 像素時(shí),背景顏色會變成淡藍(lán),否則是淡綠色。<input type="button" onclick="resize_window()" value="查看效果"></p> <SCRIPT> <!-- function resize_window() { window.open ('http://www.runoob.com/try/demo_source/trycss3_media_example1.htm','newwindow','height=299,width=299,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no') } //寫成一行 --> </SCRIPT> </body> </html>
輸出結(jié)果:
以上就是“css3中media媒體查詢器怎么用”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學(xué)習(xí)更多的知識,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。