移动设备分辨率-媒体查询1

常见的几种移动设备分辨率:

320X480    现在最主流的低端安卓机都是这个分辨率;
480X800    现在最主流的中高端安卓智能机的分辨率，包括 windows phone也是这个分辨率;
640X960    iphone4,iphone4s所使用的分辨率;

960x540    代表机型有HTC Sensation、摩托罗拉Atrix 4G;

1024x768  ipad mini/ipad1/ipad2所使用的分辨率;

1136x640  iphone5的分辨率;

1280X720  HD,三星note2,各品牌主流旗舰机型的分辨率，屏幕都很大;

2048x1536 newiPad/ipad4所使用的分辨率;

CSS3媒体查询:

初始化:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

1).使用 media 属性来指定你的样式应该应用于哪一种类型的设备:

<link href="css/print.css" rel="stylesheet" type="text/css" media="print">

2).指定media类型并设置相应的条件:

<link href="css/style.css" rel="stylesheet" type="text/css" media="screen and (min-width: 321px) and (max-width: 768px)">

3).使用带有CSS @import规则的媒体查询:

@import url("style.css") screen and (min-width:321px) and (max-width:768px);

4).该样式表适用于视口宽度在480到640像素之间的设备:

@media screen and (min-width: 480px) and (max-width: 640px) { … }