码云笔记前端博客
Home > 前端技术 > @media 响应式PC端媒体查询屏幕分辨率尺寸总结

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

2019-05-06 分类:前端技术 作者:码云 阅读(3165)

本文共计2010个字,预计阅读时长需要6分钟。

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

CSS3 @media 查询

定义和使用

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

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

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

CSS语法

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
@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
<!-- 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脚本,大家也可以下载拷贝。

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

1
<meta http-equiv ="X-UA-Compatible" content="IE=edge,chrome=1" />

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

1
2
3
4
5
6
7
8
/*屏幕大于1200排序(大屏幕电脑)*/
@media screen and (min-width: 1200px){}
/*屏幕在1024px到1199之间(中屏幕电脑)*/
@media screen and (min-width: 1024px) and (max-width: 1023px){}
/*屏幕在768px到1023之间(小屏幕-pad)*/
@media screen and (min-width: 768px) and (max-width:1023px){}
/*屏幕在480px到768之间(主要是手机屏幕)*/
@media screen and (max-width: 768px){}

这样就可以实现不同的屏幕适应不同的样式,实现自适应。

另外在查资料时找到谷歌浏览器插件Window Resizer(火狐用户可以搜Firesizer)可以调用各种类型的分辨率尺寸查看效果

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(15) 打赏

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

支付宝
微信
15

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

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 2 条评论 - @media 响应式PC端媒体查询屏幕分辨率尺寸总结

  1. 文娱帝国 Windows 7 Firefox 61.0

    写的很好,支持一下

    1. 码云 Windows 7 Chrome 69.0.3497.100

      @文娱帝国多谢支持,感谢关注哦

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 456 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 215 条
  • 链接总数: 15 个
  • 标签总数: 1009 个
  • 建站时间: 494 天
  • 访问总量: 8652479 次
  • 最近更新: 2019年10月21日