媒体查询@media的使用

Ververica 发布于2019-08-29 13:12 / 2111人阅读

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

媒体查询

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

基本使用

具体的使用方式是

媒体查询包含一个可选的媒体类型和，满足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://www.ucloud.cn/yun/112447.html

详解css媒体查询

摘要：媒体查询，添加自，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。而且浏览器也不会根据媒体查询来动态的加载样式，它只是一股脑的将所有的样式引入。简介媒体查询(Media Queries)早在在css2时代就存在,经过css3的洗礼后变得更加强大bootstrap的响应式特性就是从此而来的. 简单的来讲媒体查询是一种用于修饰css何时起作用的语法. Media...

leone 2019-08-02 11:54 评论0 收藏0
详解css媒体查询

摘要：媒体查询，添加自，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。而且浏览器也不会根据媒体查询来动态的加载样式，它只是一股脑的将所有的样式引入。简介媒体查询(Media Queries)早在在css2时代就存在,经过css3的洗礼后变得更加强大bootstrap的响应式特性就是从此而来的. 简单的来讲媒体查询是一种用于修饰css何时起作用的语法. Media...

ymyang 2019-08-29 17:09 评论0 收藏0
详解css媒体查询

摘要：媒体查询，添加自，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。而且浏览器也不会根据媒体查询来动态的加载样式，它只是一股脑的将所有的样式引入。简介媒体查询(Media Queries)早在在css2时代就存在,经过css3的洗礼后变得更加强大bootstrap的响应式特性就是从此而来的. 简单的来讲媒体查询是一种用于修饰css何时起作用的语法. Media...

gotham 2019-08-23 12:42 评论0 收藏0
详解css媒体查询

摘要：媒体查询，添加自，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。而且浏览器也不会根据媒体查询来动态的加载样式，它只是一股脑的将所有的样式引入。简介媒体查询(Media Queries)早在在css2时代就存在,经过css3的洗礼后变得更加强大bootstrap的响应式特性就是从此而来的. 简单的来讲媒体查询是一种用于修饰css何时起作用的语法. Media...

genefy 2019-08-05 15:22 评论0 收藏0
Sass Mixin 和 Media Merging

摘要：一些浏览器支持嵌套媒体查询，例如，和但是和目前并没有支持嵌套媒体查询。因此，一方面，我们有一个断点管理器从断点的全局中选择并处理错误消息，另一方面有一个断点管理器允许使用多查询条件。如果你对 Sass不太熟悉的话，你可能不知道Sass增加了许多非常有趣的功能，例如媒体查询（即 @media）功能（经常被成为 Media Merging媒体合并）。 showImg(https://se...

Flink_China 2019-08-05 10:18 评论0 收藏0
Sass Mixin 和 Media Merging

摘要：一些浏览器支持嵌套媒体查询，例如，和但是和目前并没有支持嵌套媒体查询。因此，一方面，我们有一个断点管理器从断点的全局中选择并处理错误消息，另一方面有一个断点管理器允许使用多查询条件。如果你对 Sass不太熟悉的话，你可能不知道Sass增加了许多非常有趣的功能，例如媒体查询（即 @media）功能（经常被成为 Media Merging媒体合并）。 showImg(https://se...

Cciradih 2019-08-20 11:57 评论0 收藏0