什么是媒体查询
媒体查询 media query 是一种最近流行的响应式布局方案，可以用来适配pc 端 与 移动端的设备。
在本次博客中有一个小案例，就是实现了不同端的样式的一些改变，下面上图
link标签的媒体查询
通过设备访问的宽度进行判断，不同的设备给与不同的css样式表，这样即可在两端实现给予不同的样式表，来达到不同的显示效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>媒体查询demo</title>
<link rel="stylesheet" href="common.css" />
<link rel="stylesheet" media="(max- 680px)" href="mobile.css" />
</head>
<body>
<label for="checkbox" id="label">菜单</label>
<input type="checkbox" id="checkbox" style="display: none" />
<br />
<div class="left">
<div class="left-item">王嘉尔</div>
<div class="left-item">林在范</div>
<div class="left-item">朴珍荣</div>
<div class="left-item">bambam</div>
<div class="left-item">金有谦</div>
<div class="left-item">mark</div>
<div class="left-item">崔柔仔</div>
</div>
</body>
</html>
现附上详细的媒体查询网址 ：MDN媒体查询网址
不用js实现元素隐藏显示
一般的使用js使指定元素显示或隐藏是我们很熟悉的了，但是如果不用js呢。
这里我们有一个新的方案，就是利用input的checbox来实现，我们在选中的时候就会为这个元素添加伪类元素，我们只要选中这个伪类元素吗，然后给予他的兄弟节点显示隐藏就可以了。
#checkbox:checked ~ div {
display: none;
}
label {
display: none;
}
代码如上也是非常简单的。
利用label标签实现元素替身
上面我么确实可以利用input来实现元素的隐藏于显示，但是input这个标签出现在页面中有一点太突兀了。我们可以利用label这个标签来为input制作一个外壳不同内在相同的替身，就是把作用在替身上的所有操作全部传递到input身上，点击替身与点击input是一样的了。
总结
上面就是媒体查询的一些简单应用，我相信媒体查询一定有更大的用处带我们拉发觉。