Question

我有这个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以下时，媒体查询中列出的任何元素的字体大小都不会改变。任何想法？

Answer 1

您只是忘了在max-width声明中添加单位！只需在号码后面添加px即可使用（点击代码段下方的＆＃34;查看全屏＆＃34;链接以便能够看到更改）：

＆＃13;

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;
    }
}

＆＃13;

<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>

＆＃13;

Answer 2

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

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

顺便说一句，如果可能，请不要直接在<td>内插入文字，添加<span>或<p>以将文字包装在里面。

Answer 3

您的媒体查询中存在错误

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

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

3 个答案: