定义
- 使用 @media，可以针对不同的媒体类型定义不同的样式。
- 使用 @media， 可以针对不同的屏幕尺寸设置不同的样式
- 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
语法
在内部样式定义中使用
@media mediatype and|not|only (media feature) {
CSS-Code;
}
在外部样式定义中使用
<!-- 针对不同的媒体使用不同样式 -->
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
media type
| 值 |
描述 |
| all |
用于所有设备 |
aural |
用于语音和声音合成器 |
braille |
应用于盲文触摸式反馈设备 |
embossed |
用于打印的盲人印刷设备 |
handheld |
用于掌上设备或更小的装置，如PDA和小型电话 |
| print |
用于打印机和打印预览 |
projection |
用于投影设备 |
| screen |
用于电脑屏幕，平板电脑，智能手机等 |
| speech |
应用于屏幕阅读器等发声设备 |
tty |
用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备 |
tv |
用于电视和网络电视 |
meida feature
| 值 |
描述 |
| aspect-ratio |
定义输出设备中的页面可见区域宽度与高度的比率 |
| color |
定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0 |
| color-index |
定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0 |
| device-aspect-ratio |
定义输出设备的屏幕可见宽度与高度的比率 |
| device-height |
定义输出设备的屏幕可见高度 |
| vdevice-width |
定义输出设备的屏幕可见宽度 |
| grid |
用来查询输出设备是否使用栅格或点阵 |
| height |
定义输出设备中的页面可见区域高度 |
| max-aspect-ratio |
定义输出设备的屏幕可见宽度与高度的最大比率 |
| max-color |
定义输出设备每一组彩色原件的最大个数 |
| max-color-index |
定义在输出设备的彩色查询表中的最大条目数 |
| max-device-aspect-ratio |
定义输出设备的屏幕可见宽度与高度的最大比率 |
| max-device-height |
定义输出设备的屏幕可见的最大高度 |
| max-device-width |
定义输出设备的屏幕最大可见宽度 |
| max-height |
定义输出设备中的页面最大可见区域高度 |
| max-monochrome |
定义在一个单色框架缓冲区中每像素包含的最大单色原件个数 |
| max-resolution |
定义设备的最大分辨率 |
| max-width |
定义输出设备中的页面最大可见区域宽度 |
| min-aspect-ratio |
定义输出设备中的页面可见区域宽度与高度的最小比率 |
| min-color |
定义输出设备每一组彩色原件的最小个数 |
| min-color-index |
定义在输出设备的彩色查询表中的最小条目数 |
| min-device-aspect-ratio |
定义输出设备的屏幕可见宽度与高度的最小比率 |
| min-device-width |
定义输出设备的屏幕最小可见宽度 |
| min-device-height |
定义输出设备的屏幕的最小可见高度 |
| min-height |
定义输出设备中的页面最小可见区域高度 |
| min-monochrome |
定义在一个单色框架缓冲区中每像素包含的最小单色原件个数 |
| min-resolution |
定义设备的最小分辨率 |
| min-width |
定义输出设备中的页面最小可见区域宽度 |
| monochrome |
定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0 |
| orientation |
定义输出设备中的页面可见区域高度是否大于或等于宽度。 |
| resolution |
定义设备的分辨率。如：96dpi, 300dpi, 118dpcm |
| scan |
定义电视类设备的扫描工序 |
| width |
定义输出设备中的页面可见区域宽度 |
代码实例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body {
font-family:"Lucida Sans", Verdana, sans-serif;
}
.main img {
width:100%;
}
h1{
font-size:1.625em;
}
h2{
font-size:1.375em;
}
.header {
padding:1.0121457489878542510121457489879%;
background-color:#f1f1f1;
border:1px solid #e9e9e9;
}
.menuitem {
margin:4.310344827586206896551724137931%;
margin-left:0;
margin-top:0;
padding:4.310344827586206896551724137931%;
border-bottom:1px solid #e9e9e9;
cursor:pointer;
}
.main {
padding:2.0661157024793388429752066115702%;
}
.right {
padding:4.310344827586206896551724137931%;
background-color:#CDF0F6;
}
.footer {
padding:1.0121457489878542510121457489879%;
text-align:center;
background-color:#f1f1f1;
border:1px solid #e9e9e9;
font-size:0.625em;
}
.gridcontainer {
width:100%;
}
.gridwrapper {
overflow:hidden;
}
.gridbox {
margin-bottom:2.0242914979757085020242914979757%;
margin-right: 2.0242914979757085020242914979757%;
float:left;
}
.gridheader {
width:100%;
}
.gridmenu {
width:23.481781376518218623481781376518%;
}
.gridmain {
width:48.987854251012145748987854251012%;
}
.gridright {
width:23.481781376518218623481781376518%;
margin-right:0;
}
.gridfooter {
width:100%;
margin-bottom:0;
}
@media only screen and (max-width: 500px) {
.gridmenu {
width:100%;
}
.menuitem {
margin:1.0121457489878542510121457489879%;
padding:1.0121457489878542510121457489879%;
}
.gridmain {
width:100%;
}
.main {
padding:1.0121457489878542510121457489879%;
}
.gridright {
width:100%;
}
.right {
padding:1.0121457489878542510121457489879%;
}
.gridbox {
margin-right:0;
float:left;
}
}
</style>
</head>
<body>
<div class="gridcontainer">
<div class="gridwrapper">
<div class="gridbox gridheader">
<div class="header">
<h1>Devin's home</h1>
</div>
</div>
<div class="gridbox gridmenu">
<div class="menuitem">Xi'an 1</div>
<div class="menuitem">Xi'an 2</div>
<div class="menuitem">Xi'an 3</div>
<div class="menuitem">Xi'an 4</div>
</div>
<div class="gridbox gridmain">
<div class="main">
<h1>Live</h1>
<p>the current live status</p>
<img src="room.jpg" alt="room" width="" height="">
</div>
</div>
<div class="gridbox gridright">
<div class="right">
<h2>What?</h2>
<p>what I am doing now.</p>
<h2>Where?</h2>
<p>where I am living。</p>
<h2>With who?</h2>
<p>guess!</p>
</div>
</div>
<div class="gridbox gridfooter">
<div class="footer">
<p> Resize the browser window to see the content response to the resizing.</p>
</div>
</div>
</div>
</div>
</body>
</html>
