css3--媒體查詢--分辨率不同，顯示不同

媒體查詢：

使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。

@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。

當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。

1、下面的是顯示器屏幕的分辨率，，就是瀏覽器放大縮小情況  實例////////

div {
 background-color: blue;
}
@media screen and (min-width:768px) and (max-width:1000px){  // screen and 前兩個可以省略。
 div{
 background-color: red;
}
}  // @media 結束

 

2、媒體類型

值	描述
all	用於所有設備
aural	已廢棄。用於語音和聲音合成器
braille	已廢棄。 應用於盲文觸摸式反饋設備
embossed	已廢棄。 用於打印的盲人印刷設備
handheld	已廢棄。 用於掌上設備或更小的裝置，如PDA和小型電話
print	用於打印機和打印預覽
projection	已廢棄。 用於投影設備
screen	用於電腦屏幕，平板電腦，智能手機等。
speech	應用於屏幕閱讀器等發聲設備

3、媒體功能///

值	描述
aspect-ratio	定義輸出設備中的頁面可見區域寬度與高度的比率
color	定義輸出設備每一組彩色原件的個數。如果不是彩色設備，則值等於0
color-index	定義在輸出設備的彩色查詢表中的條目數。如果沒有使用彩色查詢表，則值等於0
device-aspect-ratio	定義輸出設備的屏幕可見寬度與高度的比率。
device-height	定義輸出設備的屏幕可見高度。
device-width	定義輸出設備的屏幕可見寬度。
grid	用來查詢輸出設備是否使用柵格或點陣。
height	定義輸出設備中的頁面可見區域高度。
max-aspect-ratio	定義輸出設備的屏幕可見寬度與高度的最大比率。
max-color	定義輸出設備每一組彩色原件的最大個數。
max-color-index	定義在輸出設備的彩色查詢表中的最大條目數。
max-device-aspect-ratio	定義輸出設備的屏幕可見寬度與高度的最大比率。
max-device-height	定義輸出設備的屏幕可見的最大高度。
max-device-width	定義輸出設備的屏幕最大可見寬度。
max-height	定義輸出設備中的頁面最大可見區域高度。
max-monochrome	定義在一個單色框架緩沖區中每像素包含的最大單色原件個數。
max-resolution	定義設備的最大分辨率。
max-width	定義輸出設備中的頁面最大可見區域寬度。
min-aspect-ratio	定義輸出設備中的頁面可見區域寬度與高度的最小比率。
min-color	定義輸出設備每一組彩色原件的最小個數。
min-color-index	定義在輸出設備的彩色查詢表中的最小條目數。
min-device-aspect-ratio	定義輸出設備的屏幕可見寬度與高度的最小比率。
min-device-width	定義輸出設備的屏幕最小可見寬度。
min-device-height	定義輸出設備的屏幕的最小可見高度。
min-height	定義輸出設備中的頁面最小可見區域高度。
min-monochrome	定義在一個單色框架緩沖區中每像素包含的最小單色原件個數
min-resolution	定義設備的最小分辨率。
min-width	定義輸出設備中的頁面最小可見區域寬度。
monochrome	定義在一個單色框架緩沖區中每像素包含的單色原件個數。如果不是單色設備，則值等於0
orientation	定義輸出設備中的頁面可見區域高度是否大於或等於寬度。
resolution	定義設備的分辨率。如：96dpi, 300dpi, 118dpcm
scan	定義電視類設備的掃描工序。
width	定義輸出設備中的頁面可見區域寬度。

3、橫屏豎屏效果/////

/* Keyword values */
orientation: auto;
orientation: portrait;/*鎖定為縱向*/
orientation: landscape;/* 鎖定為橫向*/

 

@media only screen and (orientation: landscape) {
 div {
background-color: blue;
}
}

 4、設備不同時：（例子是iPhone 8plus）

div {
font-size: 16px;
}

@media only screen and (device-width:414px) and (device-height:414px){
div {
font-size: 10px;
}
}
//當打開檢查時點擊左上角的那個手機標識，選擇手機款式，就會觸發這個方法，執行下面的代碼
//括號里的是手機款式的屏幕大小尺寸