css3：媒体查询

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

媒体查询是什么

媒体查询，html5新增的特性，可以检测当前设备的类型，计算机、打印机、阅读器等，以及当前设备的的宽度。

媒体查询的作用

媒体查询类似一个钩子（hook），监听窗口变化，如果达到了设定的范围，就会触发对应的效果。

常用的应用场景例如：

有个页面，要支持手机端同时还要支持平板和pc。且几个端显示的效果差别不是很大，那么可以使用媒体查询，针对不同的屏幕做不同的适配、显示和隐藏。（像淘宝这种，pc和移动端差别很大的，同时内容也比较多，使用媒体查询反而会增加它的页面加载效率，他们使用的就是直接制作两套页面。）

简言之，媒体查询是根据不同媒体大小，能做不同的适配。

例子

媒体查询，检测显示设备的宽高。

语法：@media <only|not> <mediatype> and (<expressions>){css code...}

当屏幕大小大于等于480px的时候会将body的背景颜色修改为lightgreen

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

有一个注意点就是，and后面有一个空格，没有空格会语法错误，且不提示

css3 的媒体类型:

值	描述
print	用于打印机
screen	计算机、手机、平板的屏幕。一般css自适应都是用这个值
speech	用于大声“读出”的屏幕阅读器

表达式常用属性(属性值一般为px)

属性	说明
height	高度固定值
max-height	高度小等于给定值
min-height	高度大于给定值
width	宽度固定值
max-width	宽度小于等于给定值
min-width	宽度大于等于给定值

媒体查询在外部css连接中的使用 <link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

<link rel="stylesheet" media="scren and (max-width:300px)" href="print.css">
/*屏幕小于等于300时这块样式会生效*/

总结

本文主要讲了什么是媒体查询、他的基本用法和一些属性。当前的软件发展趋势，新出的特性总是围绕着高效和简洁，媒体查询看的有点复杂，但实际使用起来是并不难。媒体查询的出现一方面也是为了简化代码。