CSS @media 规则

您所在的位置：网站首页 › css里面的display是什么意思 › CSS @media 规则

CSS @media 规则

2024-04-21 21:06| 来源: 网络整理| 查看: 265

w3school 在线教程 HTML 系列教程浏览器脚本服务器脚本编程教程 XML 系列教程建站手册参考手册 CSS 参考手册 CSS 参考手册 CSS 浏览器支持 CSS 选择器 CSS 函数 CSS 动画相关属性 CSS 网络安全字体 CSS 字体回退 CSS 单位 CSS 颜色 CSS 颜色值 CSS 默认值 CSS 实体 CSS 听觉 CSS 属性 align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-feature-settings font-kerning font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight gap grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows hanging-punctuation height hyphens @import isolation justify-content justify-items justify-self @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes resize right row-gap scroll-behavior tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-decoration-thickness text-indent text-justify text-overflow text-shadow text-transform top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi user-select vertical-align visibility white-space width word-break word-spacing word-wrap writing-mode z-index CSS @media 规则 max-width min-height 定义和用法

@media 规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。

媒体查询可用于检查许多事情，诸如：

视口的宽度和高度设备的宽度和高度方向（手机或平板电脑处于横屏还是竖屏模式？）分辨率

使用媒体查询是一种流行的技术，用于向台式机、笔记本电脑、平板电脑和手机提供定制的样式表（响应式网页设计）。

您还可以使用媒体查询来规定某些样式仅适用于打印的文档或屏幕阅读器（mediatype：print、screen 或 speech）。

除了媒体类型之外，还有媒体特性。媒体特性通过允许测试用户代理或显示设备的具体特性，为媒体查询提供了更多特定细节。例如，您可以将样式仅应用于大于或小于特定宽度的屏幕。

另请参阅：

CSS 教程：CSS 媒体查询

CSS 教程：CSS 媒体查询实例

RWD 教程：通过媒体查询实现响应式 Web 设计

JavaScript 参考手册：window.matchMedia() 方法

实例例子 1

如果浏览器窗口的宽度为 600px 或更小时，把元素的背景颜色更改为“浅蓝色”：

@media only screen and (max-width: 600px) { body { background-color: lightblue; } }

亲自试一试

可以在页面下方找到更多 TIY 实例。

CSS 语法 @media not|only mediatype and (mediafeature and|or|not mediafeature) { CSS-Code; } not、only 和 and 关键字的含义：

not：not 关键字反正整个媒体查询的含义。

only：only 关键字可防止旧版浏览器应用指定的样式，这些浏览器不支持带媒体特性的媒体查询。它对现代浏览器没有影响。

and：and 关键字将媒体特性与媒体类型或其他媒体特性组合在一起。

它们都是可选的。但是，如果使用 not 或 only，则还必须指定媒体类型。

您还可以针对不同的媒体使用不同的样式表，就像这样：

.... 媒体类型值描述 all 默认。用于所有媒体类型设备。 print 用于打印机。 screen 用于计算机屏幕、平板电脑、智能手机等。 speech 用于朗读页面的屏幕阅读器。媒体特性值描述 any-hover

是否有任何可用的输入机制允许用户（将鼠标等）悬停在元素上？

在 Media Queries Level 4 中被添加。

any-pointer

可用的输入机制中是否有任何指针设备，如果有，它的精度如何？

在 Media Queries Level 4 中被添加。

aspect-ratio 视口（viewport）的宽高比。 color

输出设备每个像素的比特值，常见的有 8、16、32 位。

如果设备不支持输出彩色，则该值为 0。

color-gamut

用户代理和输出设备大致程度上支持的色域。

在 Media Queries Level 4 中被添加。

color-index

输出设备的颜色查询表（color lookup table）中的条目数量。

如果设备不使用颜色查询表，则该值为 0。

device-aspect-ratio

输出设备的宽高比。

已在 Media Queries Level 4 中被弃用。

device-height

输出设备渲染表面（如屏幕）的高度。

已在 Media Queries Level 4 中被弃用。

device-width

输出设备渲染表面（如屏幕）的宽度。

已在 Media Queries Level 4 中被弃用。

display-mode

应用程序的显示模式，如 web app 的 manifest 中的 display 成员所指定

在 Web App Manifest spec 被定义。

forced-colors

检测是用户代理否限制调色板。

在 Media Queries Level 5 中被添加。

grid 输出设备使用网格屏幕还是点阵屏幕？ height 视口（viewport）的高度。 hover

主输入机制是否允许用户将鼠标悬停在元素上？

在 Media Queries Level 4 中被添加。

inverted-colors

浏览器或者底层操作系统是否反转了颜色。

在 Media Queries Level 5 中被添加。

light-level

当前环境光水平。

在 Media Queries Level 5 中被添加。

max-aspect-ratio 显示区域的宽度和高度之间的最大比例。 max-color 输出设备每个颜色分量的最大位数。 max-color-index 设备可以显示的最大颜色数。 max-height 显示区域的最大高度，例如浏览器窗口。 max-monochrome 单色（灰度）设备上每种“颜色”的最大位数。 max-resolution 设备的最大分辨率，使用 dpi 或 dpcm。 max-width 显示区域的最大宽度，例如浏览器窗口。 min-aspect-ratio 显示区域的宽度和高度之间的最小比例。 min-color 输出设备每个颜色分量的最小位数。 min-color-index 设备可以显示的最小颜色数。 min-height 显示区域的最小高度，例如浏览器窗口。 min-monochrome 单色（灰度）设备上每种“颜色”的最小位数。 min-resolution 设备的最低分辨率，使用 dpi 或 dpcm。 min-width 显示区域的最小宽度，例如浏览器窗口。 monochrome

输出设备单色帧缓冲区中每个像素的位深度。

如果设备并非黑白屏幕，则该值为 0。

orientation 视窗（viewport）的旋转方向（横屏还是竖屏模式）。 overflow-block

输出设备如何处理沿块轴溢出视口(viewport)的内容。

在 Media Queries Level 4 中被添加。

overflow-inline

沿内联轴溢出视口(viewport)的内容是否可以滚动？

在 Media Queries Level 4 中被添加。

pointer

主要输入机制是一个指针设备吗？如果是，它的精度如何？

在 Media Queries Level 4 中被添加。

prefers-color-scheme

探测用户倾向于选择亮色还是暗色的配色方案。

在 Media Queries Level 5 中被添加。

prefers-contrast

探测用户是否有向系统要求提高或降低相近颜色之间的对比度。

在 Media Queries Level 5 中被添加。

prefers-reduced-motion

用户是否希望页面上出现更少的动态效果。

在 Media Queries Level 5 中被添加。

prefers-reduced-transparency

用户是否倾向于选择更低的透明度。

在 Media Queries Level 5 中被添加。

resolution 输出设备的分辨率，使用 dpi 或 dpcm。 scan 输出设备的扫描过程（适用于电视等）。 scripting

探测脚本（例如 JavaScript）是否可用。

在 Media Queries Level 5 中被添加。

update

输出设备更新内容的渲染结果的频率。

在 Media Queries Level 4 中被添加。

width 视窗（viewport）的宽度。更多实例例子 2

当浏览器的宽度为 600px 或更小时，隐藏元素：

@media screen and (max-width: 600px) { div.example { display: none; } }

亲自试一试

例子 3

如果视口的宽度为 800 像素或更宽，请使用媒体查询将背景色设置为淡紫色；如果视口的宽度介于 400 至 799 像素之间，则使用媒体查询将背景色设置为浅绿色。如果视口小于 400 像素，则背景色为浅蓝色：

body { background-color: lightblue; } @media screen and (min-width: 400px) { body { background-color: lightgreen; } } @media screen and (min-width: 800px) { body { background-color: lavender; } }

亲自试一试

例子 4

创建一个响应式导航菜单（在大屏幕上水平显示，在小屏幕上垂直显示）：

@media screen and (max-width: 600px) { .topnav a { float: none; width: 100%; } }

亲自试一试

例子 5

使用媒体查询来创建响应式列布局：

/* 在 992px 或更小的屏幕上，从四列变为两列 */ @media screen and (max-width: 992px) { .column { width: 50%; } } /* 在宽度小于或等于 600 像素的屏幕上，使各列堆叠，而不是并排 */ @media screen and (max-width: 600px) { .column { width: 100%; } }

亲自试一试

例子 6

使用媒体查询来创建响应式网站：

亲自试一试

例子 7

媒体查询还可以用于根据浏览器的方向更改页面的布局。您可以写一组 CSS 属性，这些属性仅在浏览器窗口的宽度大于其高度（即“横屏”方向）时才适用。

如果方向处于横屏模式，则使用浅蓝色背景色：

@media only screen and (orientation: landscape) { body { background-color: lightblue; } }

亲自试一试

例子 8

使用媒体查询将文本颜色设置为在屏幕上显示文档时为绿色，在打印时为黑色：

@media screen { body { color: green; } } @media print { body { color: black; } }

亲自试一试

例子 9

逗号分隔的列表：使用逗号将另一个媒体查询添加到已存在的媒体查询中（它的行为类似 OR 运算符）：

/* 当宽度介于 600px 和 900px 之间或大于 1100px 时 - 改变的外观 */ @media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) { div.example { font-size: 50px; padding: 50px; border: 8px solid black; background: yellow; } }

亲自试一试

浏览器支持

表格中的数字注明了完全支持 @media 规则的首个浏览器版本。

Chrome IE / Edge Firefox Safari Opera 21 9 3.5 4.0 9 max-width min-height CSS 参考手册 CSS 实例 CSS 测验 CSS 教程

关于 W3School 帮助 W3School 使用条款隐私条款技术支持：赢科蒙ICP备06004630号

【本文地址】

CSS @media 规则

CSS @media 规则

今日新闻

推荐新闻