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) {

}

 

下面这个网址用于生成响应页面

https://www.entomic.com/responsivecss