這篇文章將為大家詳細講解有關CSS3中媒體查詢有什么用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

我們提供的服務有：網站設計、網站建設、微信公眾號開發、網站優化、網站認證、微山ssl等。為上千家企事業單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的微山網站制作公司

媒體查詢

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

媒體查詢可用于以下內容：

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

（2）針對特定媒體的<link>，<source>以及其他的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 type="text/css">

    @media (max-width: 960px){
    body{
        background: pink;
    }
}
</style>

上面的例子表示當給頁面小于960px時頁面將會變成粉色

max-width:表示大寬度，當小于這個寬度時就會調用下面的函數

效果圖

關于CSS3中媒體查詢有什么用就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

當前名稱：CSS3中媒體查詢有什么用-創新互聯
文章網址：http://www.js-pz168.com/article20/disdjo.html

成都網站建設公司_創新互聯，為您提供網站建設、動態網站、定制開發、軟件開發、微信公眾號、面包屑導航

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯