Twitter bootstrap 在桌面上缩放而在移动设备上不缩放时，媒体查询可以工作

我有一些像这样的媒体问题-

@media (min-width: 576px) {
    .zigzag-lines{
        display: none;
    }

    .decor-single-quote {
        display: none;
    }
}

@media (min-width: 768px) {
    .zigzag-lines{
        display: block;
    }

    .decor-single-quote {
        display: block;
    }
}

当页面在桌面上缩放时，这些功能就起作用了，但当我在手机上加载页面时，它就不起作用了。 我还将这个元标记包含在HTML中-

<meta name="viewport" content="width=device-width, initial-scale=1.0">

我使用的是bootstrap-4中的flex，所以我不能使用d-sm-none。（影响设计）

---

有人能解释为什么它不起作用吗？谢谢

如果这是您所有的CSS，那么对于576px以下的屏幕没有媒体查询，因此如果您在小于576px的移动电话上打开它，则应用默认样式（即

display:block

）

如果这是您所有的CSS，对于576px以下的屏幕没有媒体查询，因此，如果您在宽度小于576px的移动电话上打开它，将应用默认样式（即

display:block

）

大多数手机屏幕尺寸低于576px（即您现在列出的最小宽度）。移动布局的常见断点为：

@仅媒体屏幕和（最小设备宽度：320px）和（最大设备宽度：480px）{
/*风格*/
}

大多数手机屏幕尺寸低于576px（这是您现在列出的最小宽度）。手机布局的常见断点是：

@仅媒体屏幕和（最小设备宽度：320px）和（最大设备宽度：480px）{
/*风格*/
}

这很有效。谢谢！还有，什么是“唯一屏幕”？没有它似乎可以工作。^这很好地解释了这很有效。谢谢！还有，什么是“唯一屏幕”？没有它似乎可以工作。^这很好地解释了这一点