响应式网站开发求助：如何让滑块内文本在移动端隐藏

没问题，要实现移动端隐藏滑块里的标题文本，用CSS媒体查询就能轻松搞定，这也是响应式设计里的标准操作。

步骤1：完善你的CSS代码 #

你现有的.numbertext样式缺少闭合的大括号，先补全它，再添加针对移动端的媒体查询规则：

/* Number text (1/3 etc) */
.numbertext {
  color: deepskyblue;
  font-family: Verdana;
  font-size: 45px;
  padding: 8px 12px;
  position: absolute;
  top: 200px;
  font-size-adjust: 0.58;
}

/* 当屏幕宽度≤768px时隐藏文本（可根据需求调整断点） */
@media (max-width: 768px) {
  .numbertext {
    display: none;
  }
}

说明 #

• max-width:768px是常用的移动端断点，你可以根据自己的设计需求修改这个数值（比如改成600px或者其他适配宽度）。
• display: none会直接移除元素的显示和它占据的空间，完全符合你要的“文本消失”效果。

可选：添加平滑过渡效果 #

如果想要隐藏过程更自然，也可以加上过渡动画：

.numbertext {
  /* 保留原有样式 */
  transition: opacity 0.3s ease;
}

@media (max-width: 768px) {
  .numbertext {
    opacity: 0;
    pointer-events: none; /* 避免用户点击到隐藏的元素区域 */
  }
}

你的HTML代码不需要做任何修改，只要确保CSS正确引入，就能实现和参考网站一致的移动端隐藏效果啦。

内容的提问来源于stack exchange，提问作者Sead Hrnjica