移动端视图下如何控制1×3表格内的字体大小？

你要实现的是仅在移动端视图下控制表格内文本的字体大小，当前代码存在的核心问题是内联样式优先级过高，导致媒体查询里的字体设置无法生效。下面是修正后的可行方案：

步骤1：重构HTML，移除内联样式 #

把原本写在<a>标签里的内联样式迁移到CSS类中，方便统一控制和后续修改：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<table class="nav-table" width="700" align="center">
  <tr>
    <td><b><a href="ListOfGenreLists.html" class="nav-link">Genre</a></b>&nbsp;&nbsp;&nbsp; </td>
    <td><b><a href="ListOfMiscellaneousLists.html" class="nav-link">Miscellaneous</a></b>&nbsp;</td>
    <td><b><a href="ListOfYearLists.html" class="nav-link">Year</a></b> </td>
  </tr>
</table>

步骤2：编写CSS样式（含媒体查询） #

通过类选择器分别设置桌面端和移动端的字体大小，确保媒体查询的样式能正确覆盖默认样式：

/* 桌面端默认样式 */
.nav-link {
  font-size: 40pt;
  color: #4B0082;
  text-decoration: none;
}

/* 移动端适配（屏幕宽度≤767px） */
@media screen and (max-width:767px) {
  .nav-table, .nav-table td { 
    display: block; 
  }
  .nav-table td { 
    position: relative;
    padding-left: 0; 
    line-height: 50px;
  }
  /* 自定义移动端字体大小，推荐用rem/vw这类相对单位适配不同屏幕 */
  .nav-table .nav-link {
    font-size: 1.5rem;
  }
}

关键说明 #

• 内联样式（style="..."）的优先级远高于普通CSS类，所以之前直接修改td字体大小的方式会被链接的内联样式覆盖，导致无效。
• 如果必须保留内联样式，可在媒体查询里用!important强制覆盖（不推荐，会增加样式维护难度）：

  .nav-table .nav-link {
    font-size: 1.5rem !important;
  }
  

• 移动端字体优先用相对单位（rem、vw），比百分比更直观，能更好适配不同尺寸的移动设备。

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