媒體查詢響應式佈局
阿新 • • 發佈：2020-10-13
目錄
什麼是媒體查詢
媒體查詢 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是一樣的了。
總結
上面就是媒體查詢的一些簡單應用，我相信媒體查詢一定有更大的用處帶我們拉發覺。