這篇文章將為大家分享的是有關CSS3中媒體查詢的介紹，有一定的參考價值，希望對大家的學習有一定的幫助。
如今響應式網頁設計越來越受到歡迎了，但是響應式設計同時也帶來了一些自身問題，例如載入緩慢等問題。但現在已經有了方法去很好的解決這個問題了，我們可以利用媒體查詢方法去解決樣式適應不同設備的問題，接下來在文章中將為大家詳細的介紹。
【推薦課程：CSS3教學#】
媒體查詢
CSS3中的媒體查詢，它可以根據使用者裝置的尺寸不同而呼叫不同的樣式。它是一種向不同設備提供不同內容的簡單而有效的方式，最常用的查詢是處理視口高度和寬度的查詢。
媒體查詢可用於下列內容：
（1）使用CSS @media和at-rules有條件地套用樣式。
（2）針對特定媒體的，
（3）為了測試和監控媒體狀態使用Window.matchMedia()和JavaScript的方法。
媒體類型
all：適用於所有裝置。
print：適用於在列印預覽模式下在螢幕上檢視的分頁資料和文件。
screen：主要適用於螢幕。
speech：主要適用於語音合成器。
媒體功能
由於篇幅問題只給大家展示部分媒體查詢功能。
| 名稱 | 描述 |
| #width | 視覺化寬度 |
| height | 視覺化高度 |
| #aspect-ratio | 視窗的寬高比寬高比 |
| orientation | 視窗的方向 |
| #resolution | 輸出裝置的像素密度 |
| #prefers-reduced-transparency | 透明度設定 |
| #grid | 裝置是否使用網格或點陣圖螢幕 |
| update | 輸出裝置修改內容外觀的頻率 |
| overflow-block | 輸出裝置如何處理沿區塊軸溢出視窗的內容 |
| overflow-inline | 可以捲動沿著內聯軸溢出視窗的內容 |
範例：
可以用and關鍵字將媒體功能與媒體類型或與其他媒體功能結合，如將樣式限制為橫向設備，寬度至少為30em長
@media (min-width: 30em) and (orientation: landscape) { ... }範例：
<style>
@media (max-width: 960px){
body{
background: pink;
}
}
</style>上面的範例表示當給頁面小於960px時頁面將會變成粉紅色
max- width:表示最大寬度，當小於這個寬度時就會呼叫下面的函數
效果圖
#總結：以上就是本篇文章的全部內容了，希望透過本篇文章能讓大家對媒體查詢有一定的了解。
以上是CSS3中什麼是媒體查詢的詳細內容。更多資訊請關注PHP中文網其他相關文章！
