通過媒體查詢實現響應式頁面學習總結
阿新 • • 發佈：2018-12-19
如有錯誤歡迎指正與批評 對於響應式頁面，我個人的理解就是一種可以根據瀏覽器的屬性進行相應的佈局和屬性的變化的web頁面，它可以通過媒體查詢的形式來實現
- 媒體查詢 媒體查詢就是根據設定斷點檢測媒體的各種屬性，然後相應地執行某一段程式碼端的功能 它的基本格式是:
@media mediatype and|not|only (media feature) {
CSS-Code;
}
通過檢測mediatype的屬性進行相應的操作。小括號內的內容可以理解為執行這段程式碼的前提條件 mediatype的屬性主要有： - screen：用於電腦螢幕等 - print：用於印表機和列印預覽 - all：用於所有裝置 media feature內包含執行方括號內的css程式碼的條件，比如：
@media screen and (max-width: 300px){
background-color: purple;
}
意思為當文件寬度小於300px時將背景顏色改為紫色 還有其他種類的判斷條件，比如min-width，max-height，min-height等 另外也可以通過將媒體查詢應用於link標籤來實現響應式頁面的功能
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
當滿足條件時執行mystylesheet.css檔案 樣例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
div {
background-color:lightgreen;
width: 300px;
height: 300px;
}
@media screen and (max-width: 300px) {
div {
background-color:lightblue;
}
}
< 如果是一個獨立的css檔案可以將媒體查詢應用於link標籤
<link rel="stylesheet" media="screen and (max-width: 735px)" href="response_735.css">
另外媒體查詢也可以附加多個條件，可以通過and、or或only連線條件，同理使用link標籤的時候也可以用上述方式連線條件
<link rel="stylesheet" media="screen and (max-width: 768px) and (min-width: 735px)" href="response_768.css">