@media only screen and
疑惑screen是指电脑吗？查了一些资料
only(限定某种设备)
screen 是媒体类型里的一种
and 被称为关键字，其他关键字还包括 not(排除某种设备)
/* 常用媒体类型 */
| 类型 | 解释 |
|---|---|
| all | 所有设备 |
| braille | 盲文 |
| embossed | 盲文打印 |
| handheld | 手持设备 |
| 文档打印或打印预览模式 | |
| projection | 项目演示，比如幻灯 |
| screen | 彩色电脑屏幕 |
| speech | 演讲 |
| tty | 固定字母间距的网格的媒体，比如电传打字机 |
| tv | 电视 |
screen一般用的比较多，下面是我自己的尝试，列出常用的设备的尺寸，然后给页面分了几个尺寸的版本。
/* 常用设备 */
| 设备 | 屏幕尺寸 |
|---|---|
| 显示器 | 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){ }
