Html 如何仅对移动版本进行调整？

目前我正在一个网站上工作以获得一些经验，但我很难只对手机版本进行更改。例如：

<h1 class="intro-header__title">
    <span>Are you ready to</span> Expand your horizon
</h1>

现在我想在移动版本上隐藏以下部分：

<span>Are you ready to</span>

不幸的是，这似乎不起作用。我对手机版上压缩的文本也有同样的问题。我只想更改移动版的边框，而不是桌面版。以下是它当前的外观（由于边框而压缩的文本）：

---

您需要将媒体类型添加到

@media

查询中（在本例中为“屏幕”）。您当前的规则也仅用于宽度超过768px或960px的屏幕。但是您希望格式化移动版本，因此必须使用

最大宽度

而不是

最小宽度

：

.intro-header\uu标题{
字体大小：2.6rem；
字号：700；
边缘底部：15px；
}
/**所有屏幕宽度不超过768px*/
@媒体屏幕和屏幕（最大宽度：768px）{
.intro-header_uu标题范围{
显示：无；
}
}
/**所有屏幕宽度不超过960像素*/
@媒体屏幕和屏幕（最大宽度：960像素）{
.intro-header_uu标题范围{
显示：无；
}
}

你准备好拓展你的视野了吗

Prob不需要

@media 768px

，因为它已经设置为

显示：无位于
960px
。是吗？非常感谢！当我检查时，这些变化反映在控制台上。然而，当我在手机上查看时，它仍然会显示带有文本的旧版本。知道那是什么吗？
<span>Are you ready to</span>

@media (min-width: 768px){
    .intro-header__title {
        display:none;
    }
}

@media (min-width: 960px){
    .intro-header__title {
        display:none;
    }
}