CSS媒體查詢，響應式布局必備知識點
文章目錄
什么是媒體查詢？&& 媒體查詢的作用
媒體查詢是一個可以根據屏幕的不同尺寸使用不同的CSS樣式渲染頁面的操作規范，僅在瀏覽器或者其他設備滿足我們指定的鬼規則相匹配時CSS才會被應用。
媒體查詢在實現響應式布局的時候起著關鍵性的作用，例如當’視口寬度小于750像素’時執行特定布局。
除此以外媒體查詢也能用來探測和我們使用的設備相關聯的其他條件，例如’設備是通過觸屏操作還是鼠標操作’。
總結一句話媒體查詢可以根據不同屏幕尺寸設置不同的樣式，同時也能探測與設備相關聯的一些條件。
CSS語法
css">@media mediatype and|not|only (media feature){
/* CSS rules go here */
}
另外，也可以使用：
"stylesheet" media="media~type and|not|only (media feature)" href="mystylesheet.css">
媒體類型 描述
all
適用于所有設備
適用于打印和打印預覽
適用于電腦、平板、手機等各種屏幕
適用于屏幕閱讀器等發聲設備
常用媒體功能 名稱描述
定義輸出設備中的頁面可見區域高度。
width
定義輸出設備中的頁面可見區域寬度。
min-width
定義輸出設備中的頁面最小可見區域寬度。
max-
定義輸出設備中的頁面最大可見區域高度。
max-width
定義輸出設備中的頁面最大可見區域寬度。
min-
定義輸出設備中的頁面最小可見區域高度。
-width
定義輸出設備的屏幕可見寬度。
-
定義輸出設備的屏幕可見高度。
min--width
定義輸出設備的屏幕最小可見寬度。
max--width
定義輸出設備的屏幕最大可見寬度。
min--
定義輸出設備的屏幕的最小可見高度。
max--
定義輸出設備的屏幕可見的最大高度。
-ratio
定義輸出設備中的頁面可見區域寬度與高度的比率
color
定義輸出設備每一組彩色原件的個數。如果不是彩色設備，則值等于0
max-color
定義輸出設備每一組彩色原件的最大個數。
--ratio
定義輸出設備的屏幕可見寬度與高度的比率。
grid
用來查詢輸出設備是否使用柵格或點陣。
max--ratio
定義輸出設備的屏幕可見寬度與高度的最大比率。
max-color-index
定義在輸出設備的彩色查詢表中的最大條目數。
max---ratio
定義輸出設備的屏幕可見寬度與高度的最大比率。
max-
定義在一個單色框架緩沖區中每像素包含的最大單色原件個數。
max-
定義設備的最大分辨率。
min--ratio
定義輸出設備中的頁面可見區域寬度與高度的最小比率。
min---ratio
定義輸出設備的屏幕可見寬度與高度的最小比率。
min-
定義設備的最小分辨率。
定義輸出設備中的頁面可見區域高度是否大于或等于寬度。
定義在一個單色框架緩沖區中每像素包含的單色原件個數。如果不是單色設備，則值等于0
定義設備的分辨率。如：96dpi, ,
scan
定義電視類設備的掃描工序。
簡單實例
寬：屏幕寬度為600px時css響應式布局媒體查詢，body文本設置成紅色
@media screen and (width: 600px){
body{
color:red;
}
}
最大寬度：屏幕寬度小于400px時，body文本為紅色
@media screen and (max-width: 400px){
body{
color:red;
}
}
屏幕朝向：設備橫屏時，body文本為紅色
@media (orientation: landscape){
body{
color:red;
}
}
復雜實例
邏輯與 ：屏幕寬度大于400px并且橫屏時，body文本為紅色
@media screen and (min-width: 400px) and (orientation: landscape){
body{
color:red
}
}
邏輯或：屏幕寬度大于400px或者橫屏時，body文本為紅色
@media screen and (min-width: 400px) and (orientation: landscape){
body{
color:red
}
}
邏輯非：屏幕不為橫屏時，body文本顏色為紅色
@media not all and (orientation: landscape){
body{
color:red
}
}
end~~~本文存在不當之處歡迎指出噢
有疑問的同學css響應式布局媒體查詢，歡迎在下方留言
若未能及時回答，也可以選擇加入前端開發交流群提問噢~~
群號：(前端開發交流群)