媒体查询@media的使用

2024年1月12日 144次阅读 来源: caoweiju

媒体查询

参考：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

    原文作者：caoweiju
    原文地址: https://segmentfault.com/a/1190000010749898
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞