小白教程
所有教程
关于
Search
172.69.58.32
172.69.58.32
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“CSS3 多媒体查询”的源代码
本页内容
上一节:
CSS3_弹性盒子
下一节:
CSS3_多媒体查询实例
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:CSS3 多媒体查询}}[[Category:CSS 教程|60]] = CSS3 多媒体查询 = == CSS2 多媒体类型 == <code>@media</code> 规则在 CSS2 中有介绍,针对不同媒体类型可以定制不同的样式规则。 例如:你可以针对不同的媒体类型(包括显示器、便携设备、电视机,等等)设置不同的样式规则。 但是这些多媒体类型在很多设备上支持还不够友好。 == CSS3 多媒体查询 == CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,CSS3 根据设置自适应显示。 媒体查询可用于检测很多事情,例如: * viewport(视窗) 的宽度与高度 * 设备的宽度与高度 * 朝向 (智能手机横屏,竖屏) 。 * 分辨率 目前很多针对苹果手机,Android 手机,平板等设备都会使用到多媒体查询。 == 浏览器支持 == 表格中的数字表示支持该属性的第一个浏览器的版本号。 {| class="table table-striped table-hover" ! 属性 ! Chrome ! Internet Explorer / Edge ! Firefox ! Safari ! Opera |- | @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |} == 多媒体查询语法 == 多媒体查询由多种媒体组成,可以包含一个或多个表达式,表达式根据条件是否成立返回 true 或 false。 <sample title="" desc="" lang="html" hererun="1"> @media not|only mediatype and (expressions) { CSS 代码...; } </sample> 如果指定的多媒体类型匹配设备类型则查询结果返回 true,文档会在匹配的设备上显示指定样式效果。 除非你使用了 not 或 only 操作符,否则所有的样式会适应在所有设备上显示效果。 * '''not:''' not是用来排除掉某些特定的设备的,比如 @media not print(非打印设备)。 * '''only:''' 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。 * '''all:''' 所有设备,这个应该经常看到。 你也可以在不同的媒体上使用不同的样式文件: <sample title="" desc="" lang="html" hererun="1"> <link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css"> </sample> == CSS3 多媒体类型 == {| class="table table-striped table-hover" ! 值 ! 描述 |- | all | 用于所有多媒体类型设备 |- | print | 用于打印机 |- | screen | 用于电脑屏幕,平板,智能手机等。 |- | speech | 用于屏幕阅读器 |} == 多媒体查询简单实例 == 使用多媒体查询可以在指定的设备上使用对应的样式替代原有的样式。 以下实例中在屏幕可视窗口尺寸小于 480 像素的设备上修改背景颜色: == <sample title="" desc="" lang="html" hererun="1"> @media screen and (max-width: 480px) { body { background-color: lightgreen; } } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> body { background-color: pink; } @media screen and (max-width: 480px) { body { background-color: lightgreen; } } </style> </head> <body> <h1>重置浏览器窗口查看效果!</h1> <p>如果媒体类型屏幕的可视窗口宽度小于 480 px ,背景颜色将改变。</p> </body> </html> </run> 以下实例在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧: == <sample title="" desc="" lang="html" hererun="1"> @media screen and (min-width: 480px) { #leftsidebar {width: 200px; float: left;} #main {margin-left:216px;} } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> .wrapper {overflow:auto;} #main {margin-left: 4px;} #leftsidebar {float: none;width: auto;} #menulist {margin:0;padding:0;} .menuitem { background:#CDF0F6; border:1px solid #d4d4d4; border-radius:4px; list-style-type:none; margin:4px; padding:2px; } @media screen and (min-width: 480px) { #leftsidebar {width:200px;float:left;} #main {margin-left:216px;} } </style> </head> <body> <div class="wrapper"> <div id="leftsidebar"> <ul id="menulist"> <li class="menuitem">Menu-item 1</li> <li class="menuitem">Menu-item 2</li> <li class="menuitem">Menu-item 3</li> <li class="menuitem">Menu-item 4</li> <li class="menuitem">Menu-item 5</li> </ul> </div> <div id="main"> <h1>重置浏览器窗口查看效果!</h1> <p>在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧。</p> </div> </div> </body> </html> </run> 以下实例在屏幕可视窗口尺寸小于 600 像素时将 div 元素隐藏: == <sample title="" desc="" lang="html" hererun="1"> @media screen and (max-width: 600px) { div.example { display: none; } } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> div.example { background-color: yellow; padding: 20px; } @media screen and (max-width: 600px) { div.example { display: none; } } </style> </head> <body> <h2>屏幕可视尺寸小于 600 px 时,隐藏以下元素。</h2> <div class="example">我是会隐藏的元素。</div> <p>重置浏览器大小,查看效果。</p> </body> </html> </run> == CSS3 @media 参考 == 更多多媒体查询内容可以参考 [[css3 pr mediaquery|@media]] 规则。
返回至“
CSS3 多媒体查询
”。
上一节:
CSS3_弹性盒子
下一节:
CSS3_多媒体查询实例