文章图片
这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能。
大家好，我是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修真院
