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和小型電話 |
|
|
用於印表機和列印預覽 |
|
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;
}
}
//當開啟檢查時點選左上角的那個手機標識，選擇手機款式，就會觸發這個方法，執行下面的程式碼
//括號裡的是手機款式的螢幕大小尺寸