在桌面上放大但不在移动设备上时，媒体查询可以正常工作

Posted 2021-05-02

我有一些像这样的媒体查询 -

@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。 （它影响设计）

有人可以解释为什么它不起作用？谢谢！

答案

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

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

另一答案

如果这是您拥有的所有CSS，则对于宽度低于576px的屏幕没有媒体查询，因此如果您在宽度小于576px的手机上打开它，则应用默认样式（即display: block）

以上是关于在桌面上放大但不在移动设备上时，媒体查询可以正常工作的主要内容，如果未能解决你的问题，请参考以下文章

在桌面、ipad、移动设备上显示不同元素的媒体查询

媒体查询在 iPad Pro 上无法正常工作

Fontawesome 图标显示在桌面上但不在移动设备上

CSS 媒体查询在移动设备上不起作用

移动横向模式的媒体查询问题

可以连接打印机的设备的媒体查询