CSS3 媒体查询

概述

media type(媒体类型)是css 2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。
media query(多媒体查询)是对media type的一种增强，是CSS 3的重要内容之一
多媒体查询由【多种媒体】组成，可以包含一个或多个【表达式】，根据条件是否成立文档会在匹配的设备上显示指定样式效果
作用：规定栏目的宽度。
取值
number 指定栏目宽度。
auto 自动，由其他属性决定，如 "column-count"。
column-count属性
作用：指定栏目的个数
取值
auto 由其他属性决定列数，比如 "column-width"。
数字 表示栏目个数。
column-gap 属性
作用：规定栏目之间的间隔。
取值
normal 默认是 1em。
长度值（px,em） 指定的长度值
column-rule 属性
作用：设置栏目边框宽度、样式和颜色规则。
column-rule-width边框宽度
column-rule-style 边框样式
solid dashed dotted double
column-rule-color边框颜色
注：column-rule为column-rule-width ，column-rule-style ，column-rule-color;的简写属性
column-span
设置栏目的跨栏合并
默认值1
all 所有
兼容
CSS3 媒体查询
概述
语法
样式表内引入媒体查询
语法：作用：针对不同的媒体类型 或特性 引入指定 的 样式表
媒体类型(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){
/* 大于等于1000px */
.box{
column-count:4;
}
}
@media screen and (min-width:600px) and (max-width:1000px){
/* 大于等于600px,小于等于1000px */
.box{
column-count:3;
}
}
@media screen and (max-width:600px){
/* 小于等于600 */
.box{
column-count:2;
}
}

使用link标签的media属性进行媒体查询

作用：针对不同的媒体类型 或特性 引入指定 的 样式表

语法：

例：

media="screen and (min-width:600px) and (max-width:1000px)">

兼容
表格中的数字表示支持 @media 规则的第一个浏览器的版本号。