如何用CSS media query实现移动端专属图片和标题显示、桌面端隐藏

核心思路是给两类元素分别绑定专属类名，配合媒体查询断点控制显示状态，通用实现方式如下：

1. HTML 结构调整 #

给仅在移动端显示的元素添加only-mobile类，仅在桌面端显示的元素添加only-desktop类，参考示例：

<!-- 桌面端专属标题 -->
<h1 class="only-desktop">桌面端标题</h1>
<!-- 移动端专属标题 -->
<h2 class="only-mobile">移动端标题</h2>
<!-- 移动端专属图片 -->
<img src="xxx.png" alt="说明文本" class="only-mobile">

2. CSS 规则编写 #

这里选择768px作为移动端和桌面端的分界阈值，你可以根据自己的项目需求调整数值：

/* 小于768px的移动设备默认样式 */
.only-desktop {
  display: none !important;
}
.only-mobile {
  display: block !important;
}

/* 大于等于768px的桌面设备规则 */
@media (min-width: 768px) {
  .only-desktop {
    display: block !important;
  }
  .only-mobile {
    display: none !important;
  }
}

补充说明 #

• 如果需要控制的元素是行内元素（如<span>），把对应位置的display: block替换为display: inline或display: inline-block即可，不破坏原有布局特性
• !important用来避免其他高优先级选择器覆盖显示规则，如果你能保证类名优先级足够，可以省略
• 如果你偏好桌面端优先的写法，也可以反过来默认隐藏移动端元素，用@media (max-width: 767px)写移动端的显示规则，最终效果完全一致

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