CSS3 媒体查询:
media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特
定的样式,从而实现更丰富的界面。
media query(多媒体查询)是对media type的一种增强,是CSS 3的重要内容之一
多媒体查询由【多种媒体】组成,可以包含一个或多个【表达式】,根据条件是否成立文档会在匹配的
设备上显示指定样式效果
【在不改变页面结构的情况下,为不同的设备类型或媒体特性,定制显示效果】
语法
样式表内引入媒体查询
语法:
@media 媒体类型 and (媒体特性表达式){
//css代码
}
媒体类型(media type):
all 所有设备;
screen 用于电脑屏幕,平板电脑,智能手机等;
———————以上较为常用———————
print 用于打印机和打印预览;
speech 应用于屏幕阅读器等发声设备
设备特性(media feature):
width、height视口宽度、高度;(可以配合min,max前缀)
device-width、device-heigh设备宽度、高度(可以配合min,max前缀)
min-最小值 大于等于指定值
max-最大值 小于等于指定值
orientation屏幕朝向
横向 landscape
竖向 portrait
在PC端当窗口的高度值大于等于宽度时该特性值为portrait否则为landscape
关键字(操作符):
and (与、和),用于合并媒体类型或多个媒体特性
@media screen and (min-width:600px) and (max-width:1000px){
.box {
column-count:3;
}
}
not: not 非,不是,用于排除掉某些特定的设备
@media not/only 媒体类型 and (媒体特性表达式) {
}
only: 仅仅、只有,用来指定某种特别的媒体类型
例子:
@media screen and (min-width :1000px) {
.box {
column-count: 4;
color: aqua;
}
}
@media screen and (min-width :600px) and (max-width :1000px){
.box1 {
column-count: 3;
color: blue;
}
}
@media screen and (max-width :600px){
.box2 {
column-count: 3;
color: chartreuse;
}
}
媒体查询横竖屏:
/* 横屏 */
@media screen and (orientation:landscape){
.box {
column-count: 4;
color: chartreuse;
}
}
/* 竖屏 */
@media screen and (orientation:portrait){
.box {
column-count: 2;
color: chocolate;
}
}
使用link标签的media属性进行媒体查询
作用:针对不同的媒体类型 或特性 引入指定 的 样式表
语法:
<link rel="stylesheet" media="媒体类型 and (媒体特性表达式)" href="mystylesheet.css">
<link rel="stylesheet" href="#.css"> 推荐
例:
<link rel="stylesheet" media="媒体类型 and (媒体特性表达式)" href="mystylesheet.css">
<link rel="stylesheet" href="#.css" media="screen and (min- width:1000px)">
<link rel="stylesheet" href="#.css" media="screen and (min-width:600px) and (max-width:1000px)">
<link rel="stylesheet" href="#.css" media="screen and (max- width:600px)">