最近在写一个PC端的活动页面，想让页面适配不同的分辨率，既然提出了这样的需求，那么我们就要去尽量满足。因为之前一直写的是固定版心，然后在将容器居中，这样写的话，就导致页面在低分辨屏幕下会出现横向的滚动条，内容不能全部展示。所以本文章主要内容也就是向大家介绍css3属性 media响应式PC端媒体查询使用方法，以及对各主流电脑屏幕分辨率的尺寸进行总结，具有一定的参考价值，需要的朋友可以参考一下。

CSS3 @media 查询

定义和使用

使用 media查询，你可以针对不同的媒体类型定义不同的样式。

media可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面， media是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

CSS语法

@media mediatype and|not|only (media feature) { CSS-Code; }

你也可以针对不同的媒体使用不同 stylesheets :

媒体类型

PC端

按屏幕宽度大小排序(主流的用橙色标明)

分辨率 比例|设备尺寸

1024*500 (8.9寸)

1024*768 (比例4：3 | 10.4寸、12.1寸、14.1寸、15寸; )

1280*800(16：10 |15.4寸)

1280*1024(比例：5：4 | 14.1寸、15.0寸)

1280*854(比例：15：10 | 15.2)

1366*768 (比例：16：9 | 不常见)

1440*900 (16：10 17寸 仅苹果用)

1440*1050(比例：5：4 | 14.1寸、15.0寸)

1600*1024(14：9 不常见)

1600*1200 (4：3 | 15、16.1)

1680*1050(16：10 | 15.4寸、20.0寸)

1920*1200 (23寸)

通过上面的电脑分辨率及尺寸的例表上我们得到了几个宽度

1024 1280 1366 1440 1680 1920

我们可在css样式中来写，也在不同屏幕下引入相应的样式。

css样式

@media screen and(min-width: 1024px){ body{font-size: 18px} } /*>=1024的设备*/

@media screen and(min-width: 1100px) { body{font-size: 20px} } /*>=1100的设备*/

@media (min-width: 1280px) { body{font-size: 22px;} }

@media screen and(min-width: 1366px) { body{font-size: 24px;} }

@media screen and(min-width: 1440px) { body{font-size: 25px !important;} }

@media screen and(min-width: 1680px) { body{font-size: 28px;} }

@media screen and(min-width: 1920px) { body{font-size: 33px;} }

用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面

ie8兼容

对ie低版本情况下不支持css3，这就是让前端头疼的事，但是不用急，有办法；

html5.min.js：用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。

respond.min.js：让IE6-IE8等其他浏览器支持媒体查询

上面的js我直接引的bootstrap的cdn脚本，大家也可以下载拷贝。

/*屏幕大于1200排序(大屏幕电脑)*/

@media screen and (min-width: 1200px){}

/*屏幕在1024px到1199之间(中屏幕电脑)*/

@media screen and (min-width: 1024px) and (max-width: 1199px){}

/*屏幕在768px到1023之间(小屏幕-pad)*/

@media screen and (min-width: 768px) and (max-width:1023px){}

/*屏幕在480px到768之间(主要是手机屏幕)*/

@media screen and (max-width: 768px){}

这样就可以实现不同的屏幕适应不同的样式，实现自适应。

另外在查资料时找到谷歌浏览器插件Window Resizer(火狐用户可以搜Firesizer)可以调用各种类型的分辨率尺寸查看效果