@media 响应式PC端媒体查询屏幕分辨率尺寸总结

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

CSS3 @media 查询

定义和使用

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

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

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

CSS 语法

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

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

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

媒体类型

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，这就是让前端头疼的事，但是不用急，有办法；

<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries --><!-- [if lte IE 8]>
<script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

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

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

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

下面是我在写公司官网用到的 @media 属性来处理兼容手机端，中端和 PC 端的样式;

/*屏幕大于 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）可以调用各种类型的分辨率尺寸查看效果

以上关于@media 响应式PC端媒体查询屏幕分辨率尺寸总结的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。