媒体查询(media Query)是CSS3新语法
@media mediatype and | not | only ( media feature ) {
CSS-Code;
}
将不同的终端设备划分成不同的类型,称为媒体类型
all 用于所有设备
print 用于打印机或打印预览
screen 用于电脑屏幕、平板电脑、智能手机等
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件
and 可以将多个媒体特性连接到一起,相当于 “且” 的意思
not 排插某个媒体类型,相当于 “非” 的意思,可以省略
only 指定某个特定的媒体类型,可以省略
每种媒体类型都具体各自不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格,注意他们要加小括号包含
width 定义输出设备中页面可见区域的宽度
min-width 定义输出设备中页面最小可见区域宽度
max-width 定义输出设备中页面最大可见区域宽度
当样式比较繁多的时候,我们可以针对不同的媒体使用不同 stylesheets (样式表)
原理:就是直接在 link 中判断设备的尺寸,然后引用不同的 css 文件
<link rel=”stylesheet” media=”mediatype and | not | only (media feature)” href=”mystylesheets.css”>