CSS @media 规则

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

实例

如果浏览器窗口的宽度为 768px 或更小时,把 <body> 元素的背景颜色更改为“浅蓝色”:

@media only screen and (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}
宽度大于768px 背景色为绿色
宽度大于768px 背景色为蓝色

定义和用法

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

CSS 语法

@media +(and | not  | only) + 媒体类型 +(and+ 媒体查询){
  CSS-Code;
}

(and+媒体查询),这个是用来限制查询条件的,例如当屏幕小于最大宽度时,@media中的class就起作用了

not、only 和 and 关键字的含义:

not 还原整个媒体查询。

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

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

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

@media还可以针对不同的媒体使用不同的样式表,就像这样:

<link rel="stylesheet" media="screen and (min-width: 768px)" href="style.css">
....

类型

描述
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)的宽度。

给TA打赏
共{{data.count}}人
人已打赏
博客

Navicat 的快捷键

2022-2-1 15:02:43

Mysql博客

mysql常用命令

2020-5-18 21:37:14

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索