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

目录
文章目录隐藏
  1. CSS3 @media 查询
  2. 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">

媒体类型

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

@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)可以调用各种类型的分辨率尺寸查看效果

「点点赞赏,手留余香」

18

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » @media 响应式PC端媒体查询屏幕分辨率尺寸总结

4 评论

  1. @media screen and (min-width: 1024px) and (max-width: 1023px){},这里写错了,楼主

  2. 写的很好,支持一下

回复 码云 取消回复