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