@media screen

@media only screen and

疑惑screen是指电脑吗？查了一些资料

only(限定某种设备)
screen 是媒体类型里的一种
and 被称为关键字，其他关键字还包括 not(排除某种设备)
/* 常用媒体类型 */

类型	解释
all	所有设备
braille	盲文
embossed	盲文打印
handheld	手持设备
print	文档打印或打印预览模式
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){ } 

参考地址
参考地址--naice138 --CSDN