CSS学习笔记:Media Queries
2014-09-19 21:47
176 查看
CSS3提供了Media Queries(媒体查询)的概念,可以利用它查询以下数据:
1、浏览器窗口的宽和高;
2、设备的宽和高;
3、设备的手持方向,横向/竖向;
4、分辨率。
@media规则的语法格式如下:
@media:<sMedia>{sRules}
(1)<sM
edia>:指定设备名称。CSS设备类型包括如下这些:、
all:用于所有设备。
aural:用于语音和音乐合成器。
braille:用于触觉反馈设备。
embossed:用于凸点字符(盲文)印刷设备。
handheld:用于小型或手提设备。
print:用于打印机。
projection:用于投影图像,如幻灯片。
screen:用于计算机显示器。
tty:用于使用固定间距字符表格的设备,如电传打字机和终端。
tv:用于电视类设备。
(2){sRules}:定义样式表。
案例:
结果:
1、浏览器窗口的宽和高;
2、设备的宽和高;
3、设备的手持方向,横向/竖向;
4、分辨率。
@media规则的语法格式如下:
@media:<sMedia>{sRules}
(1)<sM
edia>:指定设备名称。CSS设备类型包括如下这些:、
all:用于所有设备。
aural:用于语音和音乐合成器。
braille:用于触觉反馈设备。
embossed:用于凸点字符(盲文)印刷设备。
handheld:用于小型或手提设备。
print:用于打印机。
projection:用于投影图像,如幻灯片。
screen:用于计算机显示器。
tty:用于使用固定间距字符表格的设备,如电传打字机和终端。
tv:用于电视类设备。
(2){sRules}:定义样式表。
案例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .wrapper{ border:1px solid #666; padding: 5px 10px; margin:40px; } .viewing-area span{ color:#666; display: none; } /*max-width:如果视图窗口的宽度小于600像素,则该盒子将变成品红色*/ @media screen and (max-width:600px){ .one{ background: #FF99CC; } span.lt600{ display: inline-block; } } /*min-width:如果视图窗口大于900像素,则该盒子将变成橙色*/ @media screen and (min-width:900px) { .two{ background: #F90; } span.gt900{ display:inline-block; } } /*min-width&max-width:如果窗口的宽度大于600像素小于900像素*/ @media screen and (min-width:600px) and (max-width:900px){ .three{ background: #9cf; } span.bt600-900{ display:inline-block; } } /*max device width下面的样式应用于IE iphone设备,且设备最大宽度为480像素*/ /*@media screen and (max-device-width:480px){ .iphone{ background: #ccc; } }*/ </style> </head> <body> <div class="wrapper one">如果视图窗口小于600像素,则该盒子就将编程品红色</div> <div class="wrapper two">如果视图窗口大于900像素,则该盒子将变成橙色</div> <div class="wrapper three">如果视图窗口介于600像素和900像素之间,则该盒子将变成蓝色</div> <div class="wrapper iphone">该盒子只能应用到IE iphone设备,且设备最大宽度为480像素</div> <p class="viewing-area"><strong>你当前视图宽度是</strong>:<span class="lt600">小于600</span><span class="bt600-900">600-900</span><span class="gt900">大于900</span></p> </body> </html>
结果:
相关文章推荐
- XHTML+css,web标准学习笔记1——DOCTYPE声明
- CSS学习笔记五
- CSS学习笔记-附加篇(CSS的超级技巧)
- css学习笔记
- css学习笔记(5)动态定位 滤镜
- CSS学习笔记--列表
- CSS学习笔记二
- css学习笔记(3)图文混排 分级 鼠标
- CSS入门学习笔记
- CSS学习笔记一
- Css学习笔记(一)
- CSS入门学习笔记[1]
- XHTML+css,web标准学习笔记2——名字空间
- CSS学习笔记-附加篇( CSS仿淘宝首页导航条按钮布局效果)
- CSS学习笔记-附加篇(元素定义)。
- CSS学习笔记 ---转
- CSS学习笔记
- 学习CSS&Div笔记(1)
- CSS学习笔记-附加篇( 新浪大通栏Tab样式)
- css学习笔记