media query 在响应试网页中的准确应用

    咱们都知道html5中的媒体查询（media query）对于响应试网页的重要性，它为咱们提供了检测屏幕设备的有效方法，因此，当咱们开发页面的时候，就能够很方便的根据media query 来检查屏幕尺寸，并加载相应的css样式。

可是，从目前咱们常见的桌面电脑、平板电脑再到智能手机，屏幕尺寸如此之多以致让许多web前端开发者们都十分头疼。最近发现了一个很是实用的网站responsivewebcss，它为响应试网页开发者们提供了一个专门的屏幕尺寸检测工具，进入网站后，只需选择相应的屏幕设备尺寸，该工具就会为你自动生成相应的媒体查询。

 

 

如下是总结的媒体查询代码，涉及了目前主流设备屏幕的尺寸，但愿对你们有所帮助。当咱们使用的时候，直接将相依的css样式放入media媒体查询内便可。

/* 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) {
}

 responsivewebcss官网