码云笔记提示:你现在浏览的网站是镜像网站

请访问原网站:www.mybj123.com
声明:码云笔记唯一指定网址为:mybj123 .com,其他网址均为冒充,望周知!!!前端技术交流群:565733884

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

前端开发 码云 58℃ 0评论

最近在写一个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}
} /*>=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,这就是让前端头疼的事,但是不用急,有办法;

<!-- 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低版本的出现,加上一句:

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

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

/*屏幕大于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)可以调用各种类型的分辨率尺寸查看效果

转载请注明:码云笔记 » @media 响应式PC端媒体查询屏幕分辨率尺寸总结

喜欢 (15)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 写的很好,支持一下
    文娱帝国2019-05-08 13:44 回复
    • 多谢支持,感谢关注哦
      码云2019-05-08 15:46 回复