HTML如何实现桌面端与移动端分端适配不同Logo

通过CSS媒体查询控制两套Logo的显隐规则即可实现需求，全程不需要改动你已经调试完成的桌面端Logo原有属性，移动端Logo支持完全独立的样式配置。

完整实现代码 #

HTML结构部分 #

原有桌面端Logo代码完全保留，仅需新增一个类名用于识别，再单独添加移动端专属Logo节点即可：

<!-- 原有桌面端Logo：你之前写的所有属性、跳转、内嵌样式全部保留，仅新增class="logo-desktop" -->
<a href="/" class="logo-desktop">
  <img src="path/to/desktop-logo.png" alt="站点Logo">
</a>

<!-- 新增移动端专属Logo：所有资源、属性、交互都可单独配置 -->
<a href="/" class="logo-mobile">
  <img src="path/to/mobile-logo.png" alt="站点Logo">
</a>

CSS样式部分 #

通过屏幕宽度断点区分设备类型，分别控制两个Logo的显示状态，两端样式完全隔离：

/* 桌面端默认样式 */
.logo-mobile {
  display: none !important; /* 桌面端强制隐藏移动端Logo，不会占用页面空间 */
}
.logo-desktop {
  /* 你之前为桌面端Logo写的所有样式原封不动放在这里即可，不需要做任何修改
  例如原有配置：
  width: 280px;
  height: auto;
  position: absolute;
  top: 20px;
  left: 40px;
  */
}

/* 移动端适配：屏幕宽度≤768px时生效，断点数值可根据你的设计需求自行调整 */
@media screen and (max-width: 768px) {
  .logo-desktop {
    display: none !important; /* 移动端隐藏桌面端Logo */
  }
  .logo-mobile {
    display: block !important; /* 显示移动端专属Logo */
    /* 以下为移动端Logo独立样式区，所有属性单独调整，不会影响桌面端效果 */
    width: 140px;
    height: auto;
    margin: 0 auto;
    padding: 12px 16px;
    box-sizing: border-box; /* 加这个属性可以保证padding不会导致元素宽度超出屏幕 */
  }
}

方案说明 #

• 无侵入性：原有桌面端Logo的所有效果、交互、属性完全保留，不需要重构已有代码
• 样式隔离：移动端Logo的尺寸、边距、定位、资源甚至跳转链接都可以独立配置，和桌面端互不干扰
• 兼容性好：纯CSS实现，不需要引入JS做设备UA判断，加载无延迟，兼容所有主流浏览器和设备
• 灵活可调：如果需要调整设备切换的阈值，直接修改媒体查询的max-width数值即可，比如需要在平板尺寸就切换移动端Logo，把数值改成992px就行

如果你使用Tailwind CSS、Bootstrap这类自带响应式工具类的框架，可以直接用框架内置的显隐类实现相同效果，不需要手写媒体查询，逻辑和上述方案完全一致。

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