媒体查询如何使用？

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能。

大家好，我是IT修真院武汉分院web程一凡，一枚正直纯洁善良的WEB程序员。

今天给大家分享一下，修真院官网CSS任务八，深度思考中的知识点——媒体查询如何使用？

1. 背景介绍

媒体查询是针对不同的屏幕尺寸设置不同的样式而出现的，特别是你需要设置设计响应式的页面，媒体查询是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

2. 知识剖析

@media 媒体类型and （媒体特性）{你的样式}

注意：使用Media Queries必须要使用“@media”开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性）。媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔。例如：

(max-width: 480px)
从前面表中可以得知，主要有十种媒体类型和13种媒体特性，将其组合就类似于不同的CSS集合。
但与CSS属性不同的是，媒体特性是通过min/max来表示大于等于或小于做为逻辑判断，
而不是使用小于（<）和大于（>）这样的符号来判断。接下来一起来看看Media Queries在实际项目中常用的方式。

1. 最大宽度max-width

“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

上面表示的是：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏。

2.最小宽度min-width

“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。

@media screen and (min-width:900px){
.wrapper{width: 980px;}
}

上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。

3.多个媒体特性使用

Media Queries可以使用关键词"and"将多个媒体特性结合在一起。也就是说，一个Media Query中可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种媒体类型。

当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”，如下所示。

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

3. 常见问题

max-width与min-width的使用：

“min-width”指的是媒体类型大于或等于指定宽度时，样式生效。

“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于 或等于指定的宽度时，样式生效

4. 解决方案

实践是检验真理的唯一标准！！！

5. 编码实战

.red {

width: 100%;

height: 100px;

border: 1px solid red;

background: yellow;

}

@media screen and (min-width:768px) {

.red {

border: 1px solid yellow;

background: red;

}

}

 

 

6. 扩展思考

 

7. 参考文献 

1.菜鸟教程

2.媒体查询使用方法@MEDIA

3.MAX-DEVICE-WIDTH和MAX-WIDTH的区别

 

8.更多讨论 

Q1：如何利用媒体查询手写一个栅格布局？

A1：仿造bootstrap里面的标准设置 1200px；992px；768px；然后在相应的max-width里面定义col-x-x的百分比宽度，然后添加到css里就可以了，最外层的container定义其宽度，row设置清除浮。

Q2：什么样的情况下媒体查询会失效？

A2：01. 选择器的权限是否正确

         02.and前后的空格问题

         03. meta声明

Q3：媒体查询对于单位有什么要求？

A3：如果媒体查询@media使用的是相对单位，如rem，一般而言，rem是相对于HTML的字体大小的。但是，由于媒体查询的级别非常高，它并不是HTML的子元素，不是相对于HTML，而是相对于浏览器的，而浏览器的默认字体大小是16px

　　如果HTML设置字体大小为12px，设置如下媒体查询

   media="only screen and (max-width:1rem)"

　　实际上，max-width等于16px，而不是12px

　　而正是由于媒体查询是相对于浏览器的， 所以使用rem就没有必要，完全可以使用em来替代

    media="only screen and (max-width:1em)"

 

 

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

------------------------------------------------------------------------------------------------------------
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，学习的路上不再迷茫。

技能树.IT修真院