嘿，这问题我之前也碰到过！要实现移动端放大Logo让文字清晰可见，同时保持桌面端布局不动，核心思路就是用CSS媒体查询（Media Queries）针对不同屏幕尺寸做差异化样式调整，下面给你具体步骤：

1. 保留桌面端原有样式 #

先确保你的Logo在桌面端的样式已经设置好（你说对桌面端效果满意，所以这部分不用改），比如：

/* 桌面端基础样式 - 你现有的代码 */
.header-logo {
  width: 120px; /* 你当前桌面端的Logo宽度 */
  height: auto; /* 自动保持宽高比，避免变形 */
  /* 你原有的位置控制样式，比如margin、position、float等 */
  margin-left: 20px;
  align-self: center;
}

2. 用媒体查询针对移动端调整 #

添加一个针对移动端的媒体查询（通常以屏幕最大宽度768px作为移动端分界，你可以根据自己的需求调整这个阈值），在里面放大Logo尺寸，同时适配移动端菜单布局：

/* 移动端样式调整 */
@media (max-width: 768px) {
  .header-logo {
    width: 180px; /* 放大后的宽度，根据你需要的清晰度调整 */
    height: auto; /* 依然保持宽高比 */
    /* 可选：如果需要调整移动端的位置，比如让Logo居中显示 */
    margin: 0 auto;
    /* 可选：如果菜单是汉堡式，避免Logo和汉堡按钮重叠，可调整padding */
    padding: 10px 0;
  }
}

3. 额外优化：解决放大后模糊问题 #

如果放大后Logo文字依然模糊，大概率是图片分辨率不够，推荐这两个方案：

• 换成SVG矢量图：矢量图无论放大多少倍都不会失真，是Logo的最优选择，直接替换图片格式即可，CSS样式不用大改。
• 使用高分辨率位图：如果必须用PNG/JPG，准备一张至少2倍分辨率的图（比如桌面用120px，就准备240px宽的图），然后用CSS缩小/放大，或者用srcset属性让浏览器自动适配：

<img src="logo-120px.png" 
     srcset="logo-240px.png 2x" 
     alt="你的Logo文字" 
     class="header-logo">

4. 避免布局冲突 #

调整后记得测试移动端菜单，确保放大后的Logo不会挤压其他元素（比如汉堡按钮、导航链接），如果出现重叠，可适当调整菜单容器的flex布局或者padding/margin来适配。

这样就能完美实现你要的效果：桌面端保持原样，移动端Logo放大且文字清晰！

内容的提问来源于stack exchange，提问作者Murilo Guimarães