CSS媒体查询（媒体屏幕）[关闭]

Posted 2023-03-06

【中文标题】CSS媒体查询（媒体屏幕）[关闭]

【英文标题】：CSS media queries ( media screen ) [closed]

【发布时间】：2017-01-06 20:34:23

【问题描述】：

我的 WordPress 主题有以下疑问，而且很多；/

我是 WordPress 新手，所以我无法正确理解它们，但我相信我会理解你的解释。

这是我不明白的。

1：我不明白它们是针对哪个屏幕的。

2：我不明白“max”是什么（这个很奇怪）

3：最大宽度会终止设置还是什么？因为我们有最小 600 和最大 600

这里是代码。

【问题讨论】：

包含代码的屏幕截图是非常糟糕的做法。请复制并粘贴此内容，以便我们大致了解一下。

阅读此developer.mozilla.org/pl/docs/Web/CSS/Media_Queries/…

【参考方案1】：

1) screen这里指的是设备本身的屏幕（不是print，因为print是常见的）。但这与

的效果相同

@media (min-width: 312px)

只是您指定要加载网站上的screen 的max-width，就是这样

2)max 表示应用以下样式的设备屏幕的最大宽度。

例如：

@media screen and (max-width: 768px)
  //These styles will apply only if the screen size is less than or equal to 768px

3) 没有终止。如果您有max 和min 和600px，则样式将根据代码的位置应用。下面的代码将适用（如果 min 代码位于第 10 行，max 代码位于第 20 行，则 max 将起作用）

【讨论】：

@abdorefky 这是device pixel 和css pixel 之间的区别。它将两个（或三个或更多）设备像素填充到屏幕上的每个 CSS 像素中。对于设备像素，设备可以将 10 厘米宽度分成 900 像素，或者对于更清晰的设备，它可以是 1240 像素或更多。但以厘米为单位的实际宽度是相同的（10 厘米）。 css pixel 类似于cm 中的设备宽度，它将是cm 或mm 等1cm = 37.795276px

之类的度量

@abdorefky 这是device pixel 和css pixel 之间的区别。它将两个（或三个或更多）设备像素填充到屏幕上的每个 CSS 像素中。对于device pixel，设备可以将 10cm 宽度划分为 900px，或者对于更清晰的设备，可以划分为 1240px 或更多。但以厘米为单位的实际宽度是相同的（10 厘米）。 css pixel 类似于cm 中的设备宽度，它将是cm 或mm 等的度量。1cm = 37.795276px

只有英文版。但遗憾的是错过了一些句号

@abdorefky 绝对。看看 here

继续 :) 媒体查询非常有趣。但在此之前，谷歌自适应与响应式网页设计。您将获得更多信息

【参考方案2】：

屏幕不会打印在纸上，也不会通过扬声器读出。它们是类似于智能手机、笔记本电脑或显示器上的屏幕，并且规则适用于所有这些屏幕（也符合and 条件）。

Max 是一个标准的英语术语。除非宽度大于定义的最大值，否则规则适用。它不会终止任何东西，它里面的规则只会在满足条件时应用。

因为我们有最小 600 和最大 600

...具有不同的规则集。有些在宽度至少为 600px 时适用，有些在不超过 600px 时适用。

【讨论】：

你能投票给我的问题吗？

【参考方案3】：

使用媒体查询，您可以确定将应用样式的最大分辨率意味着如果屏幕尺寸大于您的数字，则不会应用媒体查询中的样式。如果屏幕尺寸小于您的数字样式，则与 min 相同。屏幕意味着当媒体有屏幕时将应用您的样式，例如您可以编写打印，而不是仅在您打印您的网站时应用样式。

【讨论】：

你能投票给我的问题吗？

【参考方案4】：

媒体查询检测当前正在使用您的媒体类型 在这种情况下，网站是屏幕，所以任何设备 - 你也可以放 用于打印的特定 css - 使您的网站易于打印。 使用媒体查询是 RWD 的核心 - 响应式网页设计。

min-width 它说浏览器'如果您的浏览器的视口是最小 312px 所以基本上每个设备都请使用这个 css 规则块 视口大小大于 312px。

ma​​x-width 如果设备的视口大于 456px，请执行此 css 规则块 - 所以所有具有 455px 及以下不会运行此 css 规则。

还有像 @media screen and (min-width: 200px) and (max-width: 1000px) - 它的目标设备有超过 201px 和低于 999px 的视口大小。

链接：

https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width

https://developer.mozilla.org/pl/docs/Web/CSS/Media_Queries/Using_media_queries

【参考方案5】：

媒体查询基本上是其他编程语言上的简单if 语句。

screen: screen 仅用于定义计算机屏幕、平板电脑或智能手机的规则。还有其他媒体类型，例如 projection 或 print。

max-width: 为 CSS 规则指定屏幕（或媒体）的最大宽度。这部分中的所有规则都是针对屏幕较低且等于该值的。

min-width: 为 CSS 规则指定屏幕（或媒体）的最小宽度。这部分中的所有规则都适用于大于该值的屏幕。

示例 #1（使用 min-width）：

@media screen and (min-width: 456px) ...

本部分的 CSS 规则仅适用于最小屏幕宽度为 456 像素的电脑屏幕、平板电脑或智能手机。

示例#2（使用max-width）：

@media screen and (max-width: 456px) ...

本部分的 CSS 规则仅适用于最大屏幕宽度为 456 像素的电脑屏幕、平板电脑或智能手机。

CSS3 媒体查询： https://www.w3.org/TR/css3-mediaqueries/

【参考方案6】：

大多数媒体功能都可以以“min-”或“max-”为前缀，以表示“大于或等于”或“小于或等于”约束。这避免了使用会与 html 和 XML 冲突的“”符号。如果您在未指定值的情况下使用媒体功能，则如果该功能的值非零，则表达式将解析为 true。

希望本指南能帮助您了解其工作原理： Link

您还应该查看本指南以了解不同的屏幕尺寸： Link