如何使用媒体查询调整表格内的文本大小？答案

【问题标题】：How do I resize text inside a table using media queries?如何使用媒体查询调整表格内的文本大小？
【发布时间】：2018-04-30 08:32:11
【问题描述】：

我有这个 html

<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="css/normalize.css"/>
<link rel="stylesheet" href="css/newcss.css"/>

...

<table>
  <tbody>
    <tr>
      <td>General Inquiries:</td>
      <td>Email@email.com</td>
    </tr>
    <tr>
      <td>Phone:</td>
      <td>#########</td>
    </tr>
    <tr>
      <td>Mailing address:</td>
      <td>123 Some St. 123 456</td>
    </tr>
  </tbody>
</table>

还有这个css

table {
    border-collapse: collapse;
    font-size: 34px;
    color: white;
    margin: 15px;
    width: 90%;
}

td {
    padding: 0px 10px;
}

@media (max-width: 730){
    table, tr, td, tbody, thead {
        font-size: 14px;
    }
}

但是，当我将窗口大小调整到 730 以下时，媒体查询中列出的任何元素的字体大小都不会改变。有什么想法吗？

【问题讨论】：

可能对你有帮助stackoverflow.com/questions/15649244/responsive-font-size
谢谢大家爱你们，我忘记了像素，愚蠢的错误大声笑

标签： html css media-queries font-size

【解决方案1】：

我想你忘了730后面的px，所以试试

@media (max-width: 730px){
    table, tr, td, tbody, thead {
        font-size: 14px;
    }
}

顺便说一句，如果可能，不要直接在<td> 内插入文本，添加<span> 或<p> 以将文本换行。

【讨论】：

您发布答案时似乎丢失了一些东西。不清楚您指的是什么以及应该添加什么OP！
好答案，奇怪的建议。直接在<td>标签中插入文字没什么问题...
@J.Titus 我知道，出于 SEO 目的，最好使用或
标签将网站上的文本包装起来。如果我错了，请纠正我
在表格中换行与搜索引擎优化无关。

【解决方案2】：

您的媒体查询有误

@media (max-width: 730px){
    table, tr, td, tbody, thead {
        font-size: 14px;
    }
}

【讨论】：

您好，很高兴您参与回答问题以帮助他人。但是，如果您指出错误而不是仅发布更正的代码，则此答案会更有帮助。

【解决方案3】：

您只是忘记在max-width 语句中添加单位！只需在数字后添加px 即可使用（单击sn-p 下方的“查看全屏”链接以查看更改）：

table {
    border-collapse: collapse;
    font-size: 34px;
    color: white;
    margin: 15px;
    width: 90%;
    background: #666; /* added this for the snippet so we can see the text at all */
}

td {
    padding: 0px 10px;
}

@media (max-width: 730px){
    table, tr, td, tbody, thead {
        font-size: 14px;
    }
}

<table>
  <tbody>
    <tr>
      <td>General Inquiries:</td>
      <td>Email@email.com</td>
    </tr>
    <tr>
      <td>Phone:</td>
      <td>#########</td>
    </tr>
    <tr>
      <td>Mailing address:</td>
      <td>123 Some St. 123 456</td>
    </tr>
  </tbody>
</table>

【讨论】：