建站
咨詢
售后
建站咨詢
新聞中心
小編給大家分享一下css媒體查詢的作用，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
css媒體查詢的作用：媒體查詢可以讓我們根據(jù)設(shè)備顯示器的特性（如視口寬度、屏幕比例、設(shè)備方向等），為其設(shè)定css樣式。媒體查詢由媒體類型和一個(gè)或多個(gè)檢測(cè)媒體特性的條件表達(dá)式組成。
1、什么是媒體查詢
媒體查詢可以讓我們根據(jù)設(shè)備顯示器的特性（如視口寬度、屏幕比例、設(shè)備方向：橫向或縱向）為其設(shè)定CSS樣式，媒體查詢由媒體類型和一個(gè)或多個(gè)檢測(cè)媒體特性的條件表達(dá)式組成。媒體查詢中可用于檢測(cè)的媒體特性有 width 、 height 和 color （等）。使用媒體查詢，可以在不改變頁面內(nèi)容的情況下，為特定的一些輸出設(shè)備定制顯示效果。
2、如何在CSS文件中引入媒體查詢
媒體查詢寫在CSS樣式代碼的最后，CSS是層疊樣式表，在同一特殊性下，靠后的的樣式會(huì)重疊前面的樣式。
3、怎樣使用media
需要在html文檔中添加以下代碼，用來兼容移動(dòng)設(shè)備的顯示效果
ps：
width=device-width:寬度等于當(dāng)前設(shè)備的寬度
initial-scale=1：初始的縮放比例（默認(rèn)為1）
maximum-scale=1：允許用戶縮放到得較大比例（默認(rèn)為1）
user-scalable=no：用戶不能手動(dòng)縮放
4、怎樣在CSS文件中寫CSS響應(yīng)式媒體查詢
舉例：
@media screen and (max-width:720px) and (min-width:320px){
body{
background-color:red;
}
@media screen and (max-width:320px){
body{
background-color:blue;
}
}ps：
該段媒體查詢的意思是：當(dāng)設(shè)備屏幕寬度在320px——720px之間時(shí)，媒體查詢中body的背景色（background-color:red;）會(huì)重疊之前的body背景色，當(dāng)設(shè)備屏幕寬度在320px以下時(shí)，媒體查詢中body的body背景色（background-color:blue;）會(huì)重疊之前的body背景色。
看完了這篇文章，相信你對(duì)css媒體查詢的作用有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
本文名稱：css媒體查詢的作用-創(chuàng)新互聯(lián)
本文路徑：http://fisionsoft.com.cn/article/dgdjpe.html
