1、Media Queries模块:是CSS3中一个和各种媒体相关的重要模块;
2、Media Queries的使用方法:
(1)@media 设备类型 and (设备特征){样式代码};,在样式代码开头必须写上@media,然后制定设备的类型(媒体类型);
(2)可以指定的值与其代表的设备类型如下表:
取值 | 代表的设备 |
all | 所有设备 |
screen | 电脑显示器 |
打印用纸或者打印预览图 | |
handheld | 便携设备 |
tv | 电视机类型设备 |
speech | 语音和音频合成器 |
braille | 盲人用点字法触觉回馈设备 |
embossed | 盲文打印机 |
projection | 各种投影设备 |
tty | 使用固定密度字母栅格的媒介 |
(3)13种设备的特征说明:
特效 | 可指定的值 | 是否允许使用min/max前缀 | 特性说明 |
width | 带单位的长度数值 | 允许 | 浏览器的窗口宽度 |
height | 带单位的长度数值 | 允许 | 浏览器的窗口高度 |
device-width | 带单位的长度数值 | 允许 | 设备屏幕的分辨值 |
device-height | 带单位的长度数值 | 允许 | 设备屏幕分辨率的最高值 |
orientation | 只能指定2个值(padding或landscape) | 不允许 | 浏览器的方向是纵向还是横向,当浏览器的高度值大于等于浏览器的宽度值的时 候,这个特性为portrait否则为landscape |
aspect-ratio | 比例值 | 允许 | 浏览器窗口的纵横比,比例值为浏览器窗口的宽度值/高度值 |
device-aspect-ratio | 比例值 | 允许 | 屏幕分辨率的纵横比,比例值为设备分辨率的宽度值/高度值 |
color | 整数值 | 允许 | 设备使用多少位的颜色值,如果不是彩色设备,该值为0 |
color-index | 整数值 | 允许 | 色彩表中的色彩数 |
monochrome | 整数值 | 允许 | 单色帧缓冲器中每像素的字节数 |
resolution | 分辨率值 | 允许 | 设备的分辨率 |
scan | 只能指定两个值(progressive或interlace) | 不允许 | 电视机类型设备的扫描方式。progressive表示逐行扫描,interlace表示隔行扫描 |
grid | 只能指定两个值(0或1) | 不允许 | 设备是基于栅格还是基于位图。基于栅格时该值为1,否则该值为0 |
3、Media Queries的应用:
(1)HTML代码:
<div class="content">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
(2)CSS代码:
.content{
margin: 30px auto;
}
.content>div{
height: 600px;
font-size: 32px;
font-weight: bold;
color: white;
text-align: center;
line-height: 600px;
}
.left{
float: left;
background-color: lightblue;
}
.center{
float: left;
margin-left: 50px;
background-color: lightcoral;
}
.right{
float: right;
background-color: lightgreen;
}
@media screen and (min-width: 1000px) {
.content{
width: 1000px;
}
.left{
width: 265px;
}
.center{
width: 370px;
}
.right{
width: 265px;
}
}
@media screen and (min-width: 640px) and (max-width:999px) {
.content{
width: 640px;
}
.left{
width: 245px;
}
.center{
width: 345px;
}
.content .right{
width: 100%;
height: 240px;
line-height: 240px;
clear: both;
margin-top: 50px;
}
}
@media screen and (max-width:639px) {
.content{
width: 100%;
}
.content>div{
width: 100%;
height: 240px;
line-height: 240px;
margin-bottom: 30px;
}
.center{
margin-left: 0px;
}
}
(3)效果图如下:
1)当浏览器窗口的宽度大于等于1000px(min-width: 1000px)时的效果图:
2)当浏览器窗口的宽度大于等于640px且小于1000px(min-width: 640px) and (max-width:999px)时的效果图:
3)当浏览器窗口的宽度小于等于639px(max-width:639px)时的效果图: