溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
媒體查詢多用于響應式網頁中。
1.初始化設置：
在HTML文件中，網頁頂部<head></head>標簽中插入一句話：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
這句話在于對響應式網頁做一個初始化設置，主要包括：
name="viewport"：標記顯示設備為視口；
width = device-width：寬度等于當前設備的寬度；
initial-scale：初始的縮放比例（默認設置為1.0）；
minimum-scale：允許用戶縮放到的最小比例（默認設置為1.0）；
maximum-scale：允許用戶縮放到的最大比例（默認設置為1.0）；
user-scalable：用戶是否可以手動縮放（默認設置為no，因為我們不希望用戶放大縮小頁面）。
2.解決IE瀏覽器的兼容性問題：
因為IE瀏覽器(IE8)不支持HTML5和CSS3中的media，所以要加載用于解決IE瀏覽器兼容性問題的JS文件：
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
兩個<script></script>標簽中的src屬性所指向的文件鏈接地址為固定地址中的文件，直接異地引用就好，不用下載到本地引用。
3.設置IE的渲染方式為最高：
現在有很多人的IE瀏覽器都升級到IE9以上，這個時候會有很多詭異的事情發生，例如現在是IE9的瀏覽器，但是瀏覽器的文檔模式卻是IE8，為了防止這種情況，我們需要下面這段代碼來讓IE的文檔模式永遠都是最新：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
當然還有一個更給力的寫法：
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
這段代碼后面加了一個chrome=1，這是由于Google Chrome Frame（谷歌內嵌瀏覽器框架GCF），如果用戶電腦安裝這個chrome插件，就可讓電腦內的IE瀏覽器規避版本因素，使用Webkit引擎及V8引擎進行排版及運算。當然如果用戶沒裝這個插件，這段代碼就會讓IE瀏覽器以最高的文檔模式展現效果。
4.CSS3 media 媒體查詢的寫法：
@media screen and (max-width: 960px){
body{
background: #000;
}
}這是一個media的標準寫法，在CSS文件中，意為：當頁面小于960px時執行以下CSS代碼，具體內容暫不用管。
對于上述代碼中的screen，意為在告知設備在打印頁面時使用襯線字體，在屏幕上顯示時用無襯線字體。目前很多網站都會直接省略screen,從而不需要考慮用戶打印網頁的需求，所以又有這種寫法：
@media (max-width: 960px){
body{
background: #000;
}
}本著思維嚴謹的原則，個人不會采用這種寫法。
5.CSS3媒體查詢主體代碼組合：
在響應式網頁布局中需要持續運用媒體查詢代碼組合，主要作用在于判斷所適配屏幕的寬度，并根據各種寬度條件套用不同的CSS樣式。
如當屏幕寬度等于960px時，將網頁背景色變為紅色：
@media screen and (max-device-width:960px){
body{
background:red;
}
}如當屏幕寬度最大為960px（小于960px）時，將網頁背景色變為黑色：
@media screen and (max-width: 960px){
body{
background: #000;
}
}如當屏幕寬度最小為960px（大于960px）時，將網頁背景色變為桔色：
@media screen and (min-width:960px){
body{
background:orange;
}
}更為常見的是混合使用，如當屏幕寬度介于960px和1200px之間時，將網頁背景色變為×××：
@media screen and (min-width:960px) and (max-width:1200px){
body{
background:yellow;
}
}6.總體開發思路：
使用CSS3中媒體查詢的大致思路就是判斷網頁在不同設備中所處的寬度范圍，這樣的范圍可能有三種（PC、平板、手機），也可能有四種（PC、平板、中大屏手機、小屏手機），當然也可能只需要兩種（平板、手機，PC端單獨開發一版時可不作為CSS3媒體查詢的使用對象），并為各種寬度范圍情況下的所需頁面元素套用不同的CSS樣式，從而適配各種設備。
7.響應式網頁開發中的寬度問題：
在實際開發中，通常需要設置響應式網頁寬度的最大值，一旦忽略最大寬度，臃腫或零散的網頁布局都會造成視覺洪災，也就是我們常說的看起來很low。
另外談談目前顯示設備中的網頁寬度問題（由于篇幅問題，就不從工業革命開始扯了），目前最為常見的寬度基本上都是：大于或等于960px的PC端（1920px、1600px、1440px、1280px、1140px、960px）、960px至640px之間的平板端（768px、640px）以及640px以下的手機端（480px、320px），以上寬度存在已久，且顯示設備中的網頁寬度會長期處于這樣的狀態下，在響應式網頁寬度設計上，基本從這幾個尺寸考慮就已經足夠。
8.media媒體查詢所有參數匯總：
媒體查詢器中還包含并不常用的相關功能，悉如示下：
width:瀏覽器可視寬度，
height:瀏覽器可視高度，
device-width:設備屏幕的寬度，
device-height:設備屏幕的高度，
orientation:檢測設備目前處于橫向還是縱向狀態，
aspect-ratio:檢測瀏覽器可視寬度和高度的比例(例如：aspect-ratio:16/9)，
device-aspect-ratio:檢測設備的寬度和高度的比例，
color:檢測顏色的位數（例如：min-color:32就會檢測設備是否擁有32位顏色），
color-index:檢查設備顏色索引表中的顏色（他的值不能是負數），
monochrome:檢測單色楨緩沖區域中的每個像素的位數（這個太高級，估計咱很少會用的到），
resolution:檢測屏幕或打印機的分辨率(例如：min-resolution:300dpi或min-resolution:118dpcm)，
grid：檢測輸出的設備是網格的還是位圖設備。
9.擴展——在CSS2中同樣有媒體查詢：
media媒體查詢并不是CSS3誕生之后的專用功能，早在CSS2開始就已經支持media，比如：
在HTML文件中的<head></head>標簽中寫入這句：
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
以上是CSS2實現的襯線用法，href屬性中寫入在某單一顯示設備中鏈接的CSS文件，但僅供入門，
如要判斷移動設備是否為縱向放置的顯示屏，可以這樣寫：
<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">
如要讓小于960px的頁面執行指定的CSS樣式文件，可以這樣寫：
<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">
當然，CSS2中的媒體查詢方法放到現在并不推薦使用，最大的弊端在于這樣會增加頁面http的請求次數，增加頁面負擔，使用CSS3中的媒體查詢才是目前的最佳方法。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
