媒体查询@media的使用

媒体查询

参考：https://developer.mozilla.org...
一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，添加自CSS3，容许内容的呈现针对一个特定范围的输出设备而进行裁剪，而没必要改变内容自己。

基本使用

具体的使用方式是

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

媒体查询包含一个可选的媒体类型和，知足CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。若是媒体查询中指定的媒体类型匹配展现文档所使用的设备类型，而且全部的表达式的值都是true，那么该媒体查询的结果为true.那么媒体查询内的样式将会生效，

语法逻辑

主要的逻辑也就是如下四个：

• and
• , [也就是 or 的逻辑]
• not 【对查询结果取反】
• only 【only操做符仅在媒体查询匹配成功的状况下被用于应用一个样式，这对于防止让选中的样式在老式浏览器中被应用到。】

媒体特色

大多数媒体属性能够带有“min-”或“max-”前缀，用于表达“最低...”或者“最高...”。例如，max-width:12450px表示应用其所包含样式的条件最高是宽度为12450px，大于12450px则不知足条件，不会应用此样式。这避免了使用与HTML和XML冲突的“<”和“>”字符。若是你未向媒体属性指定一个值，而且该特性的实际值不为零，则该表达式被解析为真。
颜色（color）
颜色索引（color-index）
宽高比（aspect-ratio）
设备宽高比（device-aspect-ratio）
设备高度（device-height）
设备宽度（device-width）
网格（grid）
高度（height）
黑白（monochrome）
方向（orientation）
分辨率（resolution）
扫描（scan）
宽度（width）
-moz-images-in-menus
-moz-mac-graphite-theme
-moz-maemo-classic
-moz-device-pixel-ratio
-moz-os-version
-moz-scrollbar-end-backward
-moz-scrollbar-end-forward
-moz-scrollbar-start-backward
-moz-scrollbar-start-forward
-moz-scrollbar-thumb-proportional
-moz-touch-enabled
-moz-windows-classic
-moz-windows-compositor
-moz-windows-default-theme
-moz-windows-theme