@media only screen and
疑惑screen是指電腦嗎？查了一些資料
only(限定某種設(shè)備)
screen 是媒體類型里的一種
and 被稱為關(guān)鍵字，其他關(guān)鍵字還包括 not(排除某種設(shè)備)
/* 常用媒體類型 */
| 類型 | 解釋 |
|---|---|
| all | 所有設(shè)備 |
| braille | 盲文 |
| embossed | 盲文打印 |
| handheld | 手持設(shè)備 |
| 文檔打印或打印預(yù)覽模式 | |
| projection | 項(xiàng)目演示，比如幻燈 |
| screen | 彩色電腦屏幕 |
| speech | 演講 |
| tty | 固定字母間距的網(wǎng)格的媒體，比如電傳打字機(jī) |
| tv | 電視 |
screen一般用的比較多，下面是我自己的嘗試，列出常用的設(shè)備的尺寸，然后給頁(yè)面分了幾個(gè)尺寸的版本。
/* 常用設(shè)備 */
| 設(shè)備 | 屏幕尺寸 |
|---|---|
| 顯示器 | 1280 x 800 |
| ipad | 1024 x 768 |
| Android | 800 x 480 |
| iPhone | 640 x 960 |
@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){ }
