当用户代理样式表和显示 flex 覆盖我的媒体查询时，如何隐藏带有媒体查询的文本？

Question

嗯，我在网上工作只是为了练习 HTML、CSS 和 SASS，看起来像这样：

它就像 Netflix，对吗？好的，所以当屏幕尺寸小于 1280 像素时，我希望 header 中的文字 Warner Live 消失。这将是 display:none，很简单，对吧？好吧，让我们进入代码：

.platform-title {
            display: flex;
            flex-flow: row wrap;
            align-content: center;
            margin-left: 5px;
            width: 7vw;

            @media screen and (min-width: 1280px) {
                display: hidden !important;
            }
        }

这是写着“Warner Live”的那段文字的代码。让我们检查 Chrome 开发工具：

当屏幕尺寸较小时，我找不到隐藏该文本的方法。 display:flex 覆盖了 display:none，即使我删除了 display:flex，用户代理的 display:block 也会覆盖我的 display:none。当屏幕尺寸小于 1280px 时，有什么想法可以为该文本获得所需的结果吗？非常感谢。

Answer 1

使用显示：none未隐藏。此属性没有隐藏值。

当用户代理样式表和显示 flex 覆盖我的媒体查询时，如何隐藏带有媒体查询的文本？

How to hide a text with media queries when user agent stylesheets and display flex overwrite my media query?

html

css

sass