# 前端小白学习纪实之媒体查询
#博学谷it学习技术支持# 接上回，进入web移动段的学习一段时间了，最近新接触到一个语法，非常具有实际开发意义，那就是媒体查询
媒体查询
媒体查询是c3中的一个新语法，在后续的开发中实用性是很强的，那他究竟是用来干什么的呢，还是从三个方面来说说，第一个就是这个语法的作用；第二个这个语法的写法，也就是代码；第三个就是这个语法要注意的地方
媒体查询的作用
使用媒体查询，可以针对不同的媒体类型定义不同的样式这是他最最重要的作用 因为在现代开发中，响应式布局司空见惯，而使用媒体查询就可以很好的实现响应式布局 比如甲的电脑屏幕分辨率大，那你在css样式表中设置的盒子的宽高或者定位的特性刚刚好能实现，但是乙的电脑屏幕分辨率非常小，你原来设置的css样式在这个小屏幕的电脑上就乱了，定位的位置也就跑偏了，你不可能让人家用户为了看你网页还更改一下电脑分辨率，你也不可能为了每一个分辨率设置一个css样式表，当然还有各种尺寸的智能电话、平板电脑和其他设备。这样的话为了解决这个问题媒体查询应用而生 我可以应用一个语法自动识别出你电脑窗口大小，然后对应每一个大小调用出对应的css属性
媒体查询的语法书写
@media only screen and (max-width: 500px) { body { background-color:lightblue; } }
这是媒体查询的完整写法，实际开发中，我们通常写@media （媒体特性）{选择器{css属性}}
这里的媒体特性就是当遇到什么特性的时候产生变化，这个特性可以是高度，宽度等等
这里的选择器和css属性那就和我们之前学过的css基础一样了，当遇到上面的特性后，你要产生什么变化就写在后面的选择器和css属性上就可以
媒体查询需要注意的地方
1注意是用@符号，前面的@media一定要有 2媒体特性这里一定要有小括号 媒体特性的值简单说三个 width 定义输出设备中页面可见区域的宽度 min-width 定义输出设备中页面最小可见区域的宽度 max-width 定义输出设备中页面最大可见区域的宽度 3引入资源 也可以我们不去书写css属性，直接link调用不同的css文件即可
