css - 为什么这种媒体查询样式应用低于其指定阈值？

Question

我有一个问题，具有指定min -width 的媒体查询将其样式应用到指定阈值以下。这发生在 chrome 和 firefox 中。我不知道是什么原因造成的。

代码非常简单。该元素是一个 an <ul>，其display属性设置为flex。所有媒体查询应该做的就是将其flex-direction从默认值更改为column. 它成功地做到了，但屏幕尺寸错误。这不是覆盖我的代码的其他样式 - 如图所示，这是正在应用的特定规则，即使屏幕比最小宽度小 60 像素以上。它会一直发生到 578 px 屏幕宽度，然后不再应用该规则。

以防万一：这是一个使用非常错误的主题和元素的 wordpress 网站，这两者我都没有发言权。我用于错误修复和样式的 CSS 代码进入 wordpress 的主题定制器“附加 CSS”部分。

我不知道为什么会发生这种情况，并希望对此事提供任何意见。

标签： cssflexboxmedia-querieselementor

Answer 1

我不确定我是否理解了这个问题，但是如果您的意思是某些 css 不适用于较小的屏幕（它仅适用于 X-769px 但不适用于 X 下），也许是因为您已经为以下屏幕设置了样式X. 你看，在 elementor 中，我们有用于响应式设计的桌面平板电脑和移动设备，如果它们都继承了更大屏幕的风格。您可能已经为移动设备设置了不同于平板电脑的样式