什么是媒體查詢
媒體查詢 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-width: 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是一樣的了。
總結
上面就是媒體查詢的一些簡單應用，我相信媒體查詢一定有更大的用處帶我們拉發覺。