css用@media適配不同尺寸的手機佈局方式
阿新 • • 發佈：2019-01-26
定義和使用
使用 @media 查詢，你可以針對不同的媒體型別定義不同的樣式。
@media 可以針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，@media 是非常有用的。
當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
CSS 語法
@media mediatype and|not|only (media feature) {
CSS-Code;
}mediatype 值
| 值 | 描述 |
|---|---|
| all | 用於所有裝置 |
| aural | 已廢棄。用於語音和聲音合成器 |
| braille | 已廢棄。 應用於盲文觸控式反饋裝置 |
| embossed | 已廢棄。 用於列印的盲人印刷裝置 |
| handheld | 已廢棄。 用於掌上裝置或更小的裝置，如PDA和小型電話 |
| 用於印表機和列印預覽 | |
| projection | 已廢棄。 用於投影裝置 |
| screen | 用於電腦螢幕，平板電腦，智慧手機等。 |
| speech | 應用於螢幕閱讀器等發聲裝置 |
| tty | 已廢棄。 用於固定的字元網格，如電報、終端裝置和對字元有限制的便攜裝置 |
| tv | 已廢棄。 用於電視和網路電視 |
媒體功能
| 值 | 描述 |
|---|---|
| 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 | 定義輸出裝置中的頁面可見區域寬度。 |
經驗
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 相容iphone5 */}
@media only screen and (max-device-width :480px){ }
@media only screen and (min-device-width :481px){ }
/*6*/
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ }
/*6+*/
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ }
/*魅族*/
@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){ }
/*mate7*/
@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){ }
/*4 4s*/
@media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){ }