我们都知道html5中的媒体查询（media query）对于响应试网页的重要性，它为我们提供了检测屏幕设备的有效方法，所以，当我们开发页面的时候，就可以很方便的根据media query 来检查屏幕尺寸，并加载相应的css样式。
但是，从目前我们常见的桌面电脑、平板电脑再到智能手机，屏幕尺寸如此之多以至让许多web前端开发者们都十分头疼。最近发现了一个非常实用的网站responsivewebcss，它为响应试网页开发者们提供了一个专门的屏幕尺寸检测工具，进入网站后，只需选择相应的屏幕设备尺寸，该工具就会为你自动生成相应的媒体查询。
以下是总结的媒体查询代码，涉及了目前主流设备屏幕的尺寸，希望对大家有所帮助。当我们使用的时候，直接将相依的css样式放入media媒体查询内即可。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
/* ipad等平板设备 (1024px) 屏幕尺寸在480px到1024px之间，且设备为横屏状态 */@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: landscape) {} /* ipad或大尺寸智能手机设备 (768px) 屏幕尺寸在321px到1024px之间，且设备为竖屏状态 */@media only screen and (min-width: 321px) and (max-width: 1024px) and (orientation: portrait) {} /* Phone 横屏状态 (480px) */@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {} /* Phone 竖屏状态 (320px) */@media only screen and (max-width: 320px) {} |