意思是在最大宽度为480px的设备上应用{}里面的样式。这里的width，注意是手机浏览器的分辨率，而不是手机设备的屏幕分辨率。比如苹果4的手机屏幕分辨率是960x640。而其自带的Safari浏览器的分辨率是320*480。我们可以通过如下代码检测所用的浏览器的分辨率：
$("#info").html("(您的浏览器的分辨率为："+($(document).width()+"*"+$(document).height())+")");
<div id="info"></div>
在很多的Android设备上，系统自带的浏览器，chrome浏览器，QQ浏览器，UC等，经过测试得出的值都不太一样。
这就给手机WEB开发带来了复杂度。同样在桌面浏览器中测试也会不同。
我们在针对手机进行WEB开发时，通常会在head中加入：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
这里的device-width也是值所使用的浏览器的width，而非手机本身。
虽说在在web app开发中，只需要掌握页面布局，页面适配，能够将页面完美在各种设备上展现。但是，为什么要这样做？这样做原理是什么？这么优点是什么？深究下去，大家不一定很清晰。
那么，咱们一起学习下~
一、2种像素
设备像素
设备像素是指设备中使用的物理像素，又称硬件像素
css像素
css像素是指css样式到吗中使用的逻辑像素。
如果在一个设备中，硬件像素数与css像素数相等，将不会产生任何问题。但是，由于视网膜设备的出现，这两者之间的差异变得越来越大。硬件像素数与css像素数成为两种截然不同的像素。
例如在iphone 4设备屏幕中的物理像素是640px*960px，而css逻辑像素数为320*480px。因此，使用大约4个物理像素来显示一个css像素。
针对图像来说，web应用程序开发者们的目标是在尽量保证页面性能的前提下显示高质量的图片。
二、与像素相关的其他单位
什么是设备像素比(device pixel ratio)？
设备像素比是指设备像素与css像素之间的比例。当这个比率为1:1时，使用1个设备像素显示1个css像素。当这个比率为2:1时，使用4个设备像素显示1个css像素。当这个比率为3:1，使用9(3*3)个设备像素显示1个css像素。
什么是像素密度？
每英寸中多显示的像素数=ppi（pixels per inch）。