溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

CSS3如何實現(xiàn)media查詢

發(fā)布時間：2022-03-08 12:01:49 來源：億速云 閱讀：175 作者：小新 欄目：web開發(fā)

這篇文章主要介紹CSS3如何實現(xiàn)media查詢，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

 實例

如果文檔寬度小于 300 像素則修改背景演示(background-color):

@media screen and (max-width: 300px) {

body {

background-color:lightblue;

}

}

定義和使用

使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。

@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。

當你重置瀏覽器大小的過程中，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面。

瀏覽器支持

表格中的數(shù)字表示支持 @media 規(guī)則的第一個瀏覽器的版本號。

Rule     
@media2193.54.09

CSS 語法

@media mediatype and|not|only (media feature) {

CSS-Code;

}

你也可以針對不同的媒體使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

媒體類型

值描述
all用于所有設備
aural已廢棄。用于語音和聲音合成器
braille已廢棄。 應用于盲文觸摸式反饋設備
embossed已廢棄。 用于打印的盲人印刷設備
handheld已廢棄。 用于掌上設備或更小的裝置，如PDA和小型電話
print用于打印機和打印預覽
projection已廢棄。 用于投影設備
screen用于電腦屏幕，平板電腦，智能手機等。
speech應用于屏幕閱讀器等發(fā)聲設備
tty已廢棄。 用于固定的字符網(wǎng)格，如電報、終端設備和對字符有限制的便攜設備
tv已廢棄。 用于電視和網(wǎng)絡電視

媒體功能

值描述
aspect-ratio定義輸出設備中的頁面可見區(qū)域?qū)挾扰c高度的比率
color定義輸出設備每一組彩色原件的個數(shù)。如果不是彩色設備，則值等于0
color-index定義在輸出設備的彩色查詢表中的條目數(shù)。如果沒有使用彩色查詢表，則值等于0
device-aspect-ratio定義輸出設備的屏幕可見寬度與高度的比率。
device-height定義輸出設備的屏幕可見高度。
device-width定義輸出設備的屏幕可見寬度。
grid用來查詢輸出設備是否使用柵格或點陣。
height定義輸出設備中的頁面可見區(qū)域高度。
max-aspect-ratio定義輸出設備的屏幕可見寬度與高度的最大比率。
max-color定義輸出設備每一組彩色原件的最大個數(shù)。
max-color-index定義在輸出設備的彩色查詢表中的最大條目數(shù)。
max-device-aspect-ratio定義輸出設備的屏幕可見寬度與高度的最大比率。
max-device-height定義輸出設備的屏幕可見的最大高度。
max-device-width定義輸出設備的屏幕最大可見寬度。
max-height定義輸出設備中的頁面最大可見區(qū)域高度。
max-monochrome定義在一個單色框架緩沖區(qū)中每像素包含的最大單色原件個數(shù)。
max-resolution定義設備的最大分辨率。
max-width定義輸出設備中的頁面最大可見區(qū)域?qū)挾取?/td>
min-aspect-ratio定義輸出設備中的頁面可見區(qū)域?qū)挾扰c高度的最小比率。
min-color定義輸出設備每一組彩色原件的最小個數(shù)。
min-color-index定義在輸出設備的彩色查詢表中的最小條目數(shù)。
min-device-aspect-ratio定義輸出設備的屏幕可見寬度與高度的最小比率。
min-device-width定義輸出設備的屏幕最小可見寬度。
min-device-height定義輸出設備的屏幕的最小可見高度。
min-height定義輸出設備中的頁面最小可見區(qū)域高度。
min-monochrome定義在一個單色框架緩沖區(qū)中每像素包含的最小單色原件個數(shù)
min-resolution定義設備的最小分辨率。
min-width定義輸出設備中的頁面最小可見區(qū)域?qū)挾取?/td>
monochrome定義在一個單色框架緩沖區(qū)中每像素包含的單色原件個數(shù)。如果不是單色設備，則值等于0
orientation定義輸出設備中的頁面可見區(qū)域高度是否大于或等于寬度。
resolution定義設備的分辨率。如：96dpi, 300dpi, 118dpcm
scan定義電視類設備的掃描工序。
width定義輸出設備中的頁面可見區(qū)域?qū)挾取?/td>

更多實例

實例

使用 @media 查詢來制作響應式設計：

@media only screen and (max-width: 500px) {

.gridmenu {

width:100%;

}

.gridmain {

width:100%;

}

.gridright {

width:100%;

}

}

以上是“CSS3如何實現(xiàn)media查詢”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手