css3媒体查询 / 木子杰软件教程

在css2标准中就已经可以根据不同的媒介类型来设置不同的输出样式了。@media规则使开发者有能力在相同的样式表中，针对不同的媒介来使用不同的样式规则。
这里主要介绍响应式设计最基础的技术：css3媒介查询

css3媒体查询

01

多媒体查询语法： @media not|only mediatype and (expressions) { CSS 代码...;} not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。 only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。 all: 所有设备例子：在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧。 css部分： ul,li{list-style: none;padding:0;margin:0;} .div1{width: auto;} #ul1{ position: relative; margin:30px auto; } #ul1 li{ background:gainsboro; border:1px solid #d4d4d4; border-radius:4px; list-style-type:none; margin:4px; padding:2px; } @media screen and (min-width: 480px) { .div1 {width:200px;float:left;} #ul1 li{ background: cadetblue; color:#fff; } } html部分： <div class="div1"> <ul id="ul1"> <li>目录1</li> <li>目录2</li> <li>目录3</li> <li>目录4</li> <li>目录5</li> </ul> </div> 效果如图：
02

CSS3 多媒体类型（mediatype） all：用于所有多媒体类型设备 print：用于打印机 screen：用于电脑屏幕，平板，智能手机等。 speech：用于屏幕阅读器例子： css部分： body { background-color: darkgray; } @media screen and (min-width: 480px) { body { background-color: lightsteelblue; } } html部分： <h1>重置浏览器窗口查看效果！</h1> <p>如果媒体类型屏幕的可视窗口宽度小于 480 px ，背景颜色将改变。</p> 效果如图：
03

也可以在不同的媒体上使用不同的样式文件： <link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css"> 例子： css： media.css body{ background: lightskyblue; font-size: 16px; } media2.css body{ background-color: darkgray; font-size: 30px; } html： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>不同的媒体上使用不同的样式文件</title> <link rel="stylesheet" type="text/css" href="media.css" media="screen and (min-width:600px) and (max-width:900px)" > <link rel="stylesheet" type="text/css" href="media2.css" media="screen and (min-width:900px)" > </head> <body> <p>600~900像素之间的窗口应用样式</p> </body> </html> 效果如图：

css3媒体查询

css3媒体查询

相关推荐