嘿，我完全懂你现在的烦恼——靠一堆媒体查询来逐个调整不同设备下的文本大小，不仅写起来麻烦，而且灵活性极低，没法适配同尺寸视口下不同文本量的div。下面给你几个更智能、更高效的自适应文本方案：

clamp() 可以让字体大小在指定的最小值、首选值、最大值之间自动适配，结合视口单位（vw）就能实现随视口宽度动态调整，同时避免文本过大或过小。它的优势是一行代码替代多个媒体查询，而且能自然适配不同文本量。

示例代码替换你原来的媒体查询：

.first-news-article-description {
  background: orange;
  width: 100%;
  height: 100px;
  padding: 15px;
}

h2 {
  /* 最小0.7em，首选1.2em + 1vw，最大1.5em */
  font-size: clamp(0.7em, 1.2em + 1vw, 1.5em);
}

/* 如果你还需要针对不同视口调整背景色，保留必要的媒体查询即可 */
@media(max-width:768px) {
  .first-news-article-description {background:yellow}
}
@media(max-width:450px) {
  .first-news-article-description {background:blue}
}
@media(max-width:350px) {
  .first-news-article-description {background:red}
}

用rem作为基础单位（尊重用户浏览器的默认字体设置），加上vw来随视口调整，这样文本既会响应视口变化，也能适配用户的字体偏好：

h2 {
  /* 基础1rem，每增加100px视口宽度，字体增加0.1rem */
  font-size: calc(1rem + 0.1vw);
}

你可以根据需求调整calc()里的数值，找到最适合的缩放比例。

如果你的需求是根据div容器的大小而非整个视口来调整文本（比如同尺寸视口下，有的div宽有的div窄），容器查询就是完美解决方案。它能让文本自适应父容器的尺寸，彻底解决你提到的“同尺寸但文本量不同的div”适配问题：

/* 首先定义容器为查询上下文 */
.first-news-article-description {
  background: orange;
  width: 100%;
  height: 100px;
  padding: 15px;
  container-type: inline-size; /* 指定基于容器的内联尺寸（宽度）查询 */
}

/* 针对容器宽度的查询 */
@container (max-width: 768px) {
  h2 { font-size: 1.2em; }
  .first-news-article-description { background: yellow; }
}

@container (max-width: 600px) {
  h2 { font-size: 1.0em; }
  .first-news-article-description { background: red; }
}

现在不管这个div在多大的视口里，只要它自身的宽度达到阈值，样式就会触发，灵活性拉满。

• 优先用rem作为基础单位，尊重用户的字体设置（比如用户把浏览器默认字体调大，你的文本也会跟着变大）
• 测试极端文本情况：比如超长文本或极短文本，确保不会溢出容器或显得过小
• 如果你需要兼容旧浏览器，clamp()和容器查询可能需要降级方案，但现在主流浏览器都已经支持了

附上你原来的代码块方便对比：

原CSS代码 #

.first-news-article-description { background: orange; width: 100%; height: 100px; padding: 15px; } @media(max-width:768px) { .first-news-article-description {background:yellow} h2 {font-size: 1.2em} } @media(max-width:600px) { .first-news-article-description {background:red} h2 {font-size: 1.0em} } @media(max-width:450px) { .first-news-article-description {background:blue} h2 {font-size: 0.8em} } @media(max-width:350px) { .first-news-article-description {background:red} h2 {font-size: 0.7em} }

原HTML代码 #

<div class="first-news-article-description"> <h2>Some random text that needs to resize properly on different devices</h2> <span>Some more text</span> </div>

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