定義和使用
使用 @media 查詢，你可以針對(duì)不同的媒體類型定義不同的樣式走趋。
@media 可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式稽煤，特別是如果你需要設(shè)置設(shè)計(jì)響應(yīng)式的頁(yè)面，@media 是非常有用的妖谴。
當(dāng)你重置瀏覽器大小的過(guò)程中窿锉，頁(yè)面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁(yè)面。
瀏覽器支持
@media瀏覽器支持.png
CSS 語(yǔ)法
@media mediatype and|not|only (media feature) {
CSS-Code;
}
你也可以針對(duì)不同的媒體使用不同
stylesheets :
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
媒體類型
| 值 | 描述 |
|---|---|
| all | 用于所有設(shè)備 |
| aural | 已廢棄膝舅。用于語(yǔ)音和聲音合成器 |
| braille | 已廢棄嗡载。 應(yīng)用于盲文觸摸式反饋設(shè)備 |
| embossed | 已廢棄。 用于打印的盲人印刷設(shè)備 |
| handheld | 已廢棄仍稀。 用于掌上設(shè)備或更小的裝置洼滚，如PDA和小型電話 |
| 用于打印機(jī)和打印預(yù)覽 | |
| projection | 已廢棄。 用于投影設(shè)備 |
| screen | 用于電腦屏幕技潘，平板電腦判沟，智能手機(jī)等。 |
| speech | 應(yīng)用于屏幕閱讀器等發(fā)聲設(shè)備 |
| tty | 已廢棄崭篡。 用于固定的字符網(wǎng)格挪哄，如電報(bào)、終端設(shè)備和對(duì)字符有限制的便攜設(shè)備 |
| tv | 已廢棄琉闪。 用于電視和網(wǎng)絡(luò)電視 |
媒體功能
| 值 | 描述 |
|---|---|
| aspect-ratio | 定義輸出設(shè)備中的頁(yè)面可見區(qū)域?qū)挾扰c高度的比率 |
| color | 定義輸出設(shè)備每一組彩色原件的個(gè)數(shù)迹炼。如果不是彩色設(shè)備，則值等于0 |
| color-index | 定義在輸出設(shè)備的彩色查詢表中的條目數(shù)颠毙。如果沒有使用彩色查詢表斯入，則值等于0 |
| device-aspect-ratio | 定義輸出設(shè)備的屏幕可見寬度與高度的比率。 |
| device-height | 定義輸出設(shè)備的屏幕可見高度蛀蜜。 |
| device-width | 定義輸出設(shè)備的屏幕可見寬度刻两。 |
| grid | 用來(lái)查詢輸出設(shè)備是否使用柵格或點(diǎn)陣。 |
| height | 定義輸出設(shè)備中的頁(yè)面可見區(qū)域高度滴某。 |
| max-aspect-ratio | 定義輸出設(shè)備的屏幕可見寬度與高度的最大比率磅摹。 |
| max-color | 定義輸出設(shè)備每一組彩色原件的最大個(gè)數(shù)滋迈。 |
| max-color-index | 定義在輸出設(shè)備的彩色查詢表中的最大條目數(shù)。 |
| max-device-aspect-ratio | 定義輸出設(shè)備的屏幕可見寬度與高度的最大比率户誓。 |
| max-device-height | 定義輸出設(shè)備的屏幕可見的最大高度饼灿。 |
| max-device-width | 定義輸出設(shè)備的屏幕最大可見寬度。 |
| max-height | 定義輸出設(shè)備中的頁(yè)面最大可見區(qū)域高度帝美。 |
| max-monochrome | 定義在一個(gè)單色框架緩沖區(qū)中每像素包含的最大單色原件個(gè)數(shù)碍彭。 |
| max-resolution | 定義設(shè)備的最大分辨率。 |
| max-width | 定義輸出設(shè)備中的頁(yè)面最大可見區(qū)域?qū)挾取?/td> |
| min-aspect-ratio | 定義輸出設(shè)備中的頁(yè)面可見區(qū)域?qū)挾扰c高度的最小比率悼潭。 |
| min-color | 定義輸出設(shè)備每一組彩色原件的最小個(gè)數(shù)庇忌。 |
| min-color-index | 定義在輸出設(shè)備的彩色查詢表中的最小條目數(shù)。 |
| min-device-aspect-ratio | 定義輸出設(shè)備的屏幕可見寬度與高度的最小比率舰褪。 |
| min-device-width | 定義輸出設(shè)備的屏幕最小可見寬度皆疹。 |
| min-device-height | 定義輸出設(shè)備的屏幕的最小可見高度。 |
| min-height | 定義輸出設(shè)備中的頁(yè)面最小可見區(qū)域高度抵知。 |
| min-monochrome | 定義在一個(gè)單色框架緩沖區(qū)中每像素包含的最小單色原件個(gè)數(shù) |
| min-resolution | 定義設(shè)備的最小分辨率墙基。 |
| min-width | 定義輸出設(shè)備中的頁(yè)面最小可見區(qū)域?qū)挾取?/td> |
| monochrome | 定義在一個(gè)單色框架緩沖區(qū)中每像素包含的單色原件個(gè)數(shù)。如果不是單色設(shè)備刷喜，則值等于0 |
| orientation | 定義輸出設(shè)備中的頁(yè)面可見區(qū)域高度是否大于或等于寬度残制。 |
| resolution | 定義設(shè)備的分辨率。如：96dpi, 300dpi, 118dpcm |
| scan | 定義電視類設(shè)備的掃描工序掖疮。 |
| width | 定義輸出設(shè)備中的頁(yè)面可見區(qū)域?qū)挾取?/td> |
實(shí)例
如果l瀏覽器窗口寬度小于420像素則修改盒子的寬高：
代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>設(shè)計(jì)媒體查詢觸發(fā)</title>
<style type="text/css">
div {
float:left;
width:49%;
height:200px;
margin:2px;
box-shadow: 2px 2px 2px #999;
border-radius: 12px;
background-color:greenyellow;
transition: width 1s ease, height 1s ease; /*設(shè)計(jì)過(guò)度*/
}
@media only screen and (max-width:420px) {/*當(dāng)窗口寬度小于420px時(shí)初茶，寬高發(fā)生變化*/
div {
width:100%;
height:100px;
}
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
瀏覽器窗口大于420px時(shí)效果.png
瀏覽器窗口小于420px時(shí)效果.png
使用 @media 查詢來(lái)制作響應(yīng)式設(shè)計(jì)（待定日后更新）
參考文獻(xiàn)：點(diǎn)擊查看
如有侵權(quán)24小時(shí)內(nèi)刪除。聯(lián)系QQ：1522025433
