CSS3中什麼是媒體查詢

這篇文章將為大家分享的是有關CSS3中媒體查詢的介紹，有一定的參考價值，希望對大家的學習有一定的幫助。

如今響應式網頁設計越來越受到歡迎了，但是響應式設計同時也帶來了一些自身問題，例如載入緩慢等問題。但現在已經有了方法去很好的解決這個問題了，我們可以利用媒體查詢方法去解決樣式適應不同設備的問題，接下來在文章中將為大家詳細的介紹。

【推薦課程：CSS3教學#】

媒體查詢

CSS3中的媒體查詢，它可以根據使用者裝置的尺寸不同而呼叫不同的樣式。它是一種向不同設備提供不同內容的簡單而有效的方式，最常用的查詢是處理視口高度和寬度的查詢。

媒體查詢可用於下列內容：

（1）使用CSS @media和at-rules有條件地套用樣式。

（2）針對特定媒體的，以及其他的HTML元素。

（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中文網其他相關文章！