CSS学习笔记:Media Queries

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}:定义样式表。

案例:

 <!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>

  结果:

CSS学习笔记:Media Queries

CSS学习笔记:Media Queries

CSS学习笔记:Media Queries

上一篇:Shell入门教程:Shell当中的特殊变量


下一篇:【C语言】C语言外部变量和内部变量