好长时间不是很清楚css的媒体查询是做什么的。今天看到一篇文章才搞明白了。通过媒体查询可以为不同大小和尺寸的媒体定义不同的css,适合相应的设备显示。看图:
看代码:
<head>
<link rel="stylesheet" href="smartphone.css"
media="only screen and (min-device-width : 320px)
and (max-device-width : 480px)">
<link rel="stylesheet" href="smartphone-landscape.css"
media="only screen and (min-width : 321px)">
<link rel="stylesheet" href="smartphone-portrait.css"
media="only screen and (max-width : 320px)">
<link rel="stylesheet" href="ipad.css"
media="only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)">
<link rel="stylesheet" href="ipad-landscape.css"
media="only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)">
<link rel="stylesheet" href="ipad-portrait.css"
media="only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)">
<link rel="stylesheet" href="widescreen.css"
media="only screen and (min-width : 1824px)">
<link rel="stylesheet" href="iphone4.css"
media="only screen
and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)">
</head>
media queries
版本:CSS3
语法:
@media :<sMedia> { sRules }
取值:
-
<sMedia>:
- 指定设备名称。请参阅 附录:设备类型 { sRules}:
- 样式表定义。
说明:
判断媒介(对象)类型来实现不同的展现。此特性让CSS可以更精确作用于不同的媒介类型,同一媒介的不同条件(分辨率、色数等等).
media_query: [only | not]? <media_type> [ and <expression> ]* expression: ( <media_feature> [: <value>]? ) media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed media_feature: width | min-width | max-width | height | min-height | max-height | device-width | min-device-width | max-device-width | device-height | min-device-height | max-device-height | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio | color | min-color | max-color | color-index | min-color-index | max-color-index | monochrome | min-monochrome | max-monochrome | resolution | min-resolution | max-resolution | scan | grid
上边是css3媒体查询的文档。
下边是一个更清楚的例子,拷贝下边的代码到一个html文件中,修改你的屏幕的分辨率的大小为800*600和1280*800.查看页面效果,你就更明白css媒体查询了.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>media queries</title>
</head>
<style>
div.example{background-color: #cee;}
@media all and (min-width: 640px) {
div.example {
background-color: #cff;
}
}
@media screen and (max-width: 1100px) {
div.example {
background-color: #c00;
}
}
</style>
<body>
<div class="example">
这是一个背景色例子 -_-!!!
</div>
</body>
</html>