如何优雅实现Div宽度随屏幕尺寸自动适配？

嘿，我完全懂你这种重复写媒体查询的烦躁！咱们可以用两种更优雅的方式来解决这个问题，既减少冗余代码，又能实现屏幕尺寸变化时的动态宽度调整：

方法一：使用CSS clamp() 函数（推荐） #

clamp() 是CSS中专门用于动态取值的函数，它接受三个参数：最小值、首选值、最大值。结合视窗单位，我们可以让元素宽度在不同屏幕尺寸下自动适配，无需多个媒体查询。

针对你的需求，我们可以这样写：

/* 桌面端默认样式（根据你的实际需求调整） */
.pageStyleEdition {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  /* 桌面端宽度，比如你原来的设置 */
  width: 100%; 
}

.displayFlexStyle {
  /* 桌面端flex样式 */
  display: flex;
  flex-direction: row;
}

/* 仅需一个媒体查询覆盖小屏样式 */
@media only screen and (max-width: 550px) {
  .pageStyleEdition {
    /* 屏幕≥290px时宽度在60%-80%动态变化；屏幕<290px时固定为60% */
    width: clamp(60%, calc(80% - ((550px - 100vw) * 0.07)), 80%);
  }

  .displayFlexStyle {
    display: flex;
    flex-direction: column;
  }
}

解释一下：calc(80% - ((550px - 100vw) * 0.07)) 会让宽度从550px时的80%，随着屏幕缩小线性降低到290px时的60%，配合clamp()的最小值限制，小于290px时就固定保持60%，实现平滑过渡的适配效果。

方法二：合并重复的媒体查询逻辑 #

如果不想用clamp()，也可以把重复的样式提取到更宽范围的媒体查询里，只在必要的地方修改差异部分：

/* 桌面端样式 */
.pageStyleEdition {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

.displayFlexStyle {
  display: flex;
  flex-direction: row;
}

/* 覆盖所有≤550px的屏幕，包含≤290px的情况 */
@media only screen and (max-width: 550px) {
  .pageStyleEdition {
    width: 80%;
  }

  .displayFlexStyle {
    display: flex;
    flex-direction: column;
  }
}

/* 仅修改≤290px时的宽度差异 */
@media only screen and (max-width: 290px) {
  .pageStyleEdition {
    width: 60%;
  }
}

这种方式把重复的.displayFlexStyle样式只写一次，仅在第二个媒体查询里修改宽度，比原来的写法减少了冗余代码。

额外小贴士 #

• 尽量使用相对单位（比如%、vw）代替固定像素，让元素更天然适配不同屏幕；
• 如果你的适配逻辑更复杂，也可以考虑使用CSS变量，把需要动态调整的值定义为变量，在媒体查询里修改变量值即可，进一步减少重复代码。

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