Question

我在WordPress主题上有以下查询，它们很多; /

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

这是我不明白的。

1：我不明白他们是哪个屏幕。

2：我不明白＆＃34; max＆＃34; （这个很奇怪）

3：最大宽度是否会终止设置？因为我们有最低600和最高600

这是代码。

Answer 1

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

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

因为我们有最低600和最高600

......有不同的规则。有些适用于宽度至少600px，有些适用于不超过600px。

Answer 2

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

Answer 3

媒体查询基本上是关于其他编程语言的简单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/

Answer 4

1） screen这里表示设备本身的屏幕（不是print，print是常见的屏幕。但这与

具有相同的效果

@media (min-width: 312px)

只是您指定要加载网站上max-width的{{1}}，

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

例如：

max

3）没有终止。如果您有@media screen and (max-width: 768px){ //These styles will apply only if the screen size is less than or equal to 768px }和max min，则会根据代码的位置应用样式。下面的代码将适用（如果600px代码位于第10行，而min代码位于第20行，则max将起作用）

Answer 5

媒体查询检测当前正在使用您的媒体类型在这种情况下网站是屏幕所以任何设备 - 你也可以放特定的css打印 - 使您的网站打印友好。使用媒体查询是RWD响应式网页设计的核心。
min-width 它说浏览器'如果您的浏览器的视口最小为312px，那么请使用此块的css规则。视口大小大于312px。
max-width 它说如果设备的视口大于456px，请执行此块css规则 - 所以所有设备都有 455px及更少将不会运行此css规则。

还有像 @media屏幕和（最小宽度：200px）和（最大宽度：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

Answer 6

大多数媒体功能都可以以＆＃34; min - ＆＃34;为前缀。或＆＃34; max - ＆＃34;表达＆＃34;大于或等于＆＃34;或者＆＃34;小于或等于＆＃34;限制。这避免了使用＆＃34;＆lt;＆＃34;和＆＃34;＆gt;＆＃34;符号，与HTML和XML冲突。如果使用媒体功能而未指定值，则如果要素的值不为零，则表达式将解析为true。

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

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

CSS媒体查询（媒体屏幕）

6 个答案: