使用媒体查询控制<hr>元素的显示与隐藏

要让<hr>在小屏幕下显示为标准的100%宽度水平线，你只需要在媒体查询里给目标类设置display: block即可——这是<hr>元素的默认显示属性，能让它撑满父容器宽度，呈现标准水平线样式。

结合你现有的代码，完整的CSS可以这么写：

/* 默认隐藏，大屏幕下不显示 */
.hrHide {
  display: none;
}

/* 屏幕宽度小于1080px时显示 */
@media (max-width: 1079px) {
  .hrHide {
    display: block;
    /* 可选：统一不同浏览器默认样式差异 */
    width: 100%;
    margin: 1em 0;
    border: none;
    border-top: 1px solid #ccc;
  }
}

• display: block是核心设置，确保<hr>作为块级元素占满可用宽度
• 可选的额外样式是为了消除不同浏览器的默认样式差异，让水平线样式更统一

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