@media和不同适配单位（关键字not、only、and、,、媒体类型、媒体特性、2种应用方式）和（em、rem、vw|vh）、移动端适配、css单位

目录

@media

关键字

not

only

and

,

媒体类型

媒体特性

应用方式

link应用

css应用

不同适配单位

em

rem

vw|vh

移动端适配

css单位

---

@media

用于为不同的媒体类型/设备应用不同的样式。媒体查询可用于检查许多事情，例如：

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

关键字

not

不满足媒体特性时生效，对媒体类型和第一个and不生效（相当于非！，将条件取反的同时，将and变为或）。

注意：使用时必须在@media后面并指定媒体类型且搭配有and且只能出现一次。

例如下面：

1.没有not，表示满足电脑屏幕&&width<=960px&&width<=500px时，实现定义样式。

2.有not，表示满足电脑屏幕width>960 || width>500px时，实现定义样式

@media screen and (max-width:960px) and (max-width:500px){
      
}
@media not screen and (max-width:960px) and (max-width:500px){
      
}

only

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

注意：必须指定媒体类型。

and

将媒体特性与媒体类型或其他媒体特性组合在一起（相当于且&&）。

,

满足其中一个即可（相当于或||），每次的逗号后面相当于重新写一条@media规则。

媒体类型

注意：not对媒体类型是不生效的。

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

媒体特性

注意：max相当于小于等于，min相当于大于等于，每一条特性都需要用括号包裹。

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

应用方式

link应用

在link标签中引用，例如下面表示当是电脑显示器且浏览器宽度小于等于800px时，应用 sod.css样式。

<!--<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">-->
<link rel="stylesheet" href="sod.css" media="screen and (max-width: 800px)"> 

css应用

在css中使用，例如下面表示当浏览器宽度小于等于970px时，body背景颜色为红色。

@media screen and (max-width:970px){
    body{background:red;}
}

不同适配单位

em

等于当前标签的font-size大小。如果当前标签没有设置font-size，那么就找父元素的font-size（如果父元素为2em的像素，则将其转化为px），直到浏览器默认大小为止。

rem

等于根标签（html）的font-size大小。如果HTML没有设置font-size，那么直接参考浏览器的默认大小。

vw|vh

网页显示区域（根标签html）的的宽|高度，1vw|vh=1%网页显示区域宽高。

移动端适配

关于移动端适配，你必须要知道的 - 掘金

css单位

一文读懂 CSS 单位 - 知乎