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

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

CSS3 @media 查询

定义和使用

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

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

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

CSS语法

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

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

1
 

媒体类型

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

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样式

1
 @media screen and(min-width: 1024px){ body{font-size: 18px} } /*>=1024的设备*/ @media screen and(min-width: 1100px) { body{font-size: 20px} } /*>=1024的设备*/ @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,这就是让前端头疼的事,但是不用急,有办法;

1
2
3
4
5
6
</p>
<!-- 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]-->
<p>

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

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

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

最后为了减少ie低版本的出现,加上一句:

1
 

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

1
 /*屏幕大于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端媒体查询屏幕分辨率尺寸总结
喜欢(2) 打赏

评论4

评论前必须登录!

  1. #2
    @media screen and (min-width: 1024px) and (max-width: 1023px){},这里写错了,楼主
    gg82019-12-02 16:26:04
  2. #1
    写的很好,支持一下
    文娱帝国2019-05-08 13:44:29

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏