pc显示器分辨率 前端_@media 响应式PC端媒体查询屏幕分辨率尺寸总结

最近在写一个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*80