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

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 中的任何文本都不会调整大小。现有媒体查询是否也应调整此文本的大小，还是我需要添加 table 标记？如果可以，请有人提供代码示例，因为我已经尝试失败了。我只是希望 table 文本与主体文本一起缩小。

谢谢

[更新] Table 根据要求...

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

[更新] 向大家致敬苏打柳，谢谢！ :) 以下工作正常，但不确定代码是否完全正确？我一开始把table字体设置为62.5%，但是这样导致文字太小，所以设置为100%，现在看起来不错。

在我的手机上看起来不错，但这只是一个屏幕尺寸，请问您是否看到需要更正的地方？ table 字体为 100% 有什么不利影响吗？ table 字体也应该添加到@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

这是一个示例，它说明了您可以使用媒体查询做什么，但它可能不是您想要的，因为我仍然需要理解这一点:)。

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

以整页打开并水平调整 window 大小。

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>

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

How to use media queries correctly to reduce font size?

fonts

size

media

reduce