如何正确使用媒体查询来减小字体大小？

Question

我正在尝试设置我的 CSS，以便在移动设备上查看时减小字体大小。我花了一整天的时间试图弄清楚这一点，但现在很难过。

我找到了我认为应该可以解决问题的媒体查询代码，但它并没有发生在我身上，在移动设备上查看时字体大小仍然是标准大小 (Galaxy Nexus)。

html { font-size: 62.5%; }
body {
    font-family:Arial,Helvetica,sans-serif;
    font-size: 1em;
}
@media (max-width: 300px) {
    html { font-size: 70%; }
}

@media (min-width: 500px) {
    html { font-size: 80%; }
}

@media (min-width: 700px) {
    html { font-size: 120%; }
}

@media (min-width: 1200px) {
    html { font-size: 200%; }
}

请找出任何错误？我的 CSS 中是否有其他东西阻止它正常工作？

这是它在 ebays 应用中的样子...（抱歉还不能嵌入图片，因为没有 10 个代表）...

Text waaay to big on mobile

[更新] 现在修复了部分文本主体现在调整大小的位置，但是，如图所示...

Click to view pic

...表格中的任何文本都不会调整大小。现有的媒体查询是否也应该调整此文本的大小，还是我需要添加一个表格标签？如果是这样，有人可以提供代码示例，因为我尝试过失败。我只是希望表格文本与主体文本一起缩小。

谢谢

[更新] 表按要求...

<table style="margin-bottom:15px; margin-right:auto; margin-left:0px">
   <tr>
      <th style="text-align:left; vertical-align:text-top; padding:3px">Platform:</th>
                <td style="vertical-align:text-top">Xbox.</td>
            </tr>
            <tr>
                <th style="text-align:left; vertical-align:text-top; padding:3px">Game Condition:</th>
                <td style="vertical-align:text-top">Used game - Good.</td>
            </tr>
            <tr>
                <th style="text-align:left; vertical-align:text-top; padding:3px">Includes:</th>
                <td style="vertical-align:text-top">Disc, manual, case &amp; cover.</td>
            </tr>
            <tr>
                <th style="text-align:left; vertical-align:text-top; padding:3px">Region:</th>
                <td style="vertical-align:text-top">PAL.</td>
            </tr>
            <tr>
              <th style="text-align:left; vertical-align:text-top; padding:3px">Players:</th>
              <td style="vertical-align:text-top">1-2.</td>
            </tr>
              <th style="text-align:left; vertical-align:text-top; padding:3px">Xbox 360 Compatible:</th>
              <td><strong>NO - NOT</strong> compatible.</td>
            </tr>
  </table>

[更新] 冰雹苏打柳，谢谢！ :) 下面的工作，虽然不确定代码是否完全应该是？起初我将表格字体设置为 62.5%，但这导致文本太小，因此设置为 100%，现在看起来不错。

在我的手机上看起来不错，但这只是一种屏幕尺寸，请问您是否需要进行任何更正？表格字体为 100% 的任何不利影响？表格字体是否也应该添加到@media 查询中？

html { font-size: 62.5%; }
table { font-size: 100% }
body {
    font-family:Arial,Helvetica,sans-serif;
    font-size: 1em;
}
@media (max-width: 300px) {
    html { font-size: 70%; }
}

@media (min-width: 500px) {
    html { font-size: 80%; }
}

@media (min-width: 700px) {
    html { font-size: 100%; }
}

@media (min-width: 1200px) {
    html { font-size: 120%; }
}

Answer 1

这是一个示例，说明您可以使用媒体查询执行哪些操作，但它可能不是您想要的，因为我仍然需要理解这一点:)。

我所做的样式选择大多是丑陋的，我只想展示媒体查询的基本工作原理；也许到时候你就可以解释你需要什么了。

全页打开并水平调整窗口大小。

body {
  font-size: 3em;
  padding: 1em;
  transition: all .5s ease;
}

table {
  border: 2px solid pink;
  margin: auto;
  width: 75%;
}

@media screen and (max-width: 1200px) {
  body {
    font-size: 2em; 
  }

  table {
    border: 4px solid blue;
    width: 80%;
  }
}

@media screen and (max-width: 800px) {
  body {
    font-size: 1.5em; 
  }

  table {
    border: 8px solid green;
    width: 85%;
  }
}

@media screen and (max-width: 400px) {
  body {
    font-size: 1em; 
  }

  table {
    border: 16px solid red;
    width: 90%;
  }
}

<table>
  <tr>
    <td>(open me in full page) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum molestias eius veniam enim eos! Debitis commodi, in, aliquam asperiores molestias, magnam ipsam animi beatae, tenetur similique et mollitia necessitatibus. Nesciunt?</td>
  </tr>
</table>