Media Query字体大小不生效，移动端字体无法缩小求助

核心问题分析 #

1. .textbox的字体设置未作用到h1：你只给.textbox设置了font-size，但<h1>元素自带浏览器默认字体大小（通常为2em左右），会覆盖父元素的字体设置，导致Media Query里的字体大小不生效。
2. .read-here存在语法错误：font color是无效CSS属性，正确写法是color；且你把文字颜色设成和背景色一致的rgb(0, 68, 11)，文字会完全不可见。
3. 移动端vw单位取值过小：2vw在480px宽度的设备上仅为9.6px，视觉上几乎没变化，建议调整为更合理的数值。

修正后的CSS代码 #

.tiffany {
    width:100%;
    height:100%;
}

.tiffany img {
  width: 100%;
  height: 100%;
  position: relative;
}

@media only screen and (max-width: 480px) {
    .tiffany img {
    width: 300px;
    height: 225px;
    }
}

.tiffany .textbox {
  position: absolute;
  margin: 32px;
  font-weight: bold;
  text-align: left;
}
/* 直接给h1设置字体大小，确保样式生效 */
.tiffany .textbox h1 {
  font-size: 5vw;
  margin: 0; /* 清除h1默认外边距 */
}

@media only screen and (max-width: 480px) {
    .tiffany .textbox {
      margin: 0px;
      padding: 0px;
      left: 10px;
    }
    /* 移动端单独设置h1字体大小 */
    .tiffany .textbox h1 {
      font-size: 16px; /* 换成固定px更易控制，也可尝试4vw */
    }
}

.tiffany .gradient {
  left: 0px;
  top: 0px;
  z-index: 1000;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.85), transparent);
}

/* read-here */
.read-here {
  position: absolute;
  bottom: 4vw;
  left: 50px;
  background-color: rgb(0, 68, 11);
  color: #fff; /* 修正颜色属性，设为白色保证可见 */
  padding: 16px;
  font-size: 16px;
  border: none;
}

@media only screen and (max-width: 480px) {
    .read-here {
      bottom: 4vw;
      left: 10px;
      padding: 8px;
      font-size: 12px; /* 调整为更清晰的字号 */
    }
}

修正后的HTML代码（移除无效自定义标签） #

<div class="tiffany">
  <img class="background-image" src="https://freight.cargo.site/t/original/i/49f84023695066f70817f10d5164bfc85e438f33abd59b9c50a439f6a22f0454/Featured-Page_Tiffany_Alfonseca_Latina_Edit.jpeg">
  <div class="gradient">
    <div class="textbox full-pointer-events-none">
      <h1>Tiffany Alfonseca Pays Homage in Painting</h1>
    </div>
    <div class="read-here">
      <b><a href="https://latina.com/tiffany-alfonseca-pays-homage-in-painting/" target="_blank">Read here</a></b>
    </div>
  </div>
</div>

额外提示 #

• 若使用框架或全局样式，可通过浏览器开发者工具（F12）查看元素的样式计算结果，检查是否有更高优先级的选择器覆盖你的字体设置。
• 移动端字体建议优先使用px或rem，比vw更易控制最小字号，避免过小导致可读性差。

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