@media媒体查询

@media媒体查询

使用媒体查询，可以在不同的设备上面展示不同的样式。

@media mediatype and|not|only (media feature) {
    //CSS
}

mediatype 可选值

• all:适用于所有设备,all为默认值
• print:适用于打印机和打印预览
• screen：适用于电脑屏幕，平板屏幕，手机屏幕
• speech：适用于屏幕阅读器
  还有一些其他的例如tv均已废弃

and|not|only可以用于联合构造复杂的媒体查询，例如：

@media screen and (min-width: 900px) {}
@media only screen and (min-width: 900px) {}

以上两种形式在现代浏览器中功能相同，only关键字可防止不支持带有媒体功能的媒体查询的旧版浏览器应用给定的样式。它对现代浏览器没有影响。

@media screen and (min-width: 600px) and (max-width: 900px) {}

and可以连接多个媒体功能。

@media not speech and (min-width: 900px) {}
@media not (speech and (min-width: 900px)) {}

not会反转整个媒体查询的含义。以上两种语句表达意义相同。

@media not speech and (min-width: 900px),print and (max-width:900px) {}
@media (not speech and (min-width: 900px)),print and (max-width:900px) {}

not不会应用于以逗号分隔的媒体查询列表中的每个媒体查询。因此上面两种语句表达意义相同。

media feature