实例
如果文档宽度小于 300 像素则修改背景演示(background-color):
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
CSS 语法
@media
mediatype and|not|only
(media feature) {
CSS-Code;
}
CSS-Code;
}
你也可以针对不同的媒体使用不同 stylesheets :
<link rel="stylesheet" media="mediatype and | not | only (media feature)" href="mystylesheet.css">
mediatype(媒体类型):
all 用于所有设备
only 限制设备,如only screen(只针对彩屏设备)
print 用于打印机和打印预览
screen 用于电脑屏幕,平板电脑,智能手机等(常用)
speech 应用于屏幕阅读器等发声设备
media feature(媒体功能):常用如下
max-width(宽度小于时)
max-height (高度小于时)
min-width(宽度大于时)
min-height(高度大于时)