@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端媒体查询屏幕分辨率尺寸总结
@media screen and (min-width: 1024px) and (max-width: 1023px){},这里写错了,楼主
多谢指出,马上改
写的很好,支持一下
多谢支持,感谢关注哦