如何实现div宽度随屏幕增大从100%降至30%以适配logo显示？

要实现从移动端100%宽度到桌面端30%宽度的平滑过渡，有两种实用方案：

方案一：使用CSS clamp() 结合动态计算（推荐） #

clamp() 能让属性值在指定区间内动态变化，搭配calc()可精准控制宽度随屏幕尺寸的变化趋势。假设以**320px（移动端最小宽度）**为起点（宽度100%），**1920px（桌面端常见宽度）**为终点（宽度30%），可以这样设置：

修改.inner的CSS：

.inner {
  margin-left: auto;
  margin-right: auto;
  /* 逻辑：从320px到1920px，宽度从100%线性降到30%，超出范围锁定最值 */
  width: clamp(30%, calc(100% - 0.04375% * (100vw - 320px)), 100%);
}

计算说明： #

• 宽度变化差值：100% - 30% = 70%
• 屏幕宽度差值：1920px - 320px = 1600px
• 每像素宽度变化量：70% / 1600px = 0.04375%/px
• 最终公式用clamp()限制在30%到100%之间，避免屏幕尺寸超出区间后出现异常。

方案二：媒体查询 + 过渡动画 #

如果需要更灵活的断点控制，可通过媒体查询设置多个尺寸区间，配合transition实现平滑过渡：

修改.inner的CSS：

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  transition: width 0.3s ease; /* 添加过渡动画，让尺寸变化更自然 */
}

/* 平板尺寸区间 */
@media (min-width: 768px) {
  .inner {
    width: 70%;
  }
}

/* 桌面小屏区间 */
@media (min-width: 1024px) {
  .inner {
    width: 50%;
  }
}

/* 桌面大屏区间 */
@media (min-width: 1920px) {
  .inner {
    width: 30%;
  }
}

这种方式能根据不同设备尺寸精准调整宽度，过渡动画提升视觉体验。

修改后的完整代码 #

CSS #

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  /* 替换为方案一或方案二的代码即可 */
  width: clamp(30%, calc(100% - 0.04375% * (100vw - 320px)), 100%);
}

#logo {
  width: 100%;
  height: auto;
}

HTML #

<div class="outer">
  <div class="middle">
    <div class="inner">
      <img id="logo" src="https://via.placeholder.com/100">
    </div>
  </div>
</div>

（注：原HTML中style="max-width:100vw;"可移除，clamp()已限制最大宽度）

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