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

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

Click to view pic

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

谢谢

[UPDATE] 按要求表......

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

[UPDATE] 所有冰雹sodawillow，谢谢！ :)以下工作，虽然不确定代码是否完全应该是？我首先将表格字体设置为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>

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

1 个答案: