媒体查询

一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，添加自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

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/4408