如何正确使用媒体查询来减小字体大小? [英] How to use media queries correctly to reduce font size?

问题描述

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

I'm trying to set my CSS so that font sizes decease when viewed on mobile devices. I've spent all day trying to figure this out, but am now stumped.

我找到了我认为应该可以解决此问题的媒体查询代码，但是这对我来说却没有发生，在移动设备(Galaxy Nexus)上观看时，字体大小保持标准大小.

I found media query code that I think should solve the issue, however it's not happening for me, font size remains standard size when viewing on mobile (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内是否可能有其他东西阻止它正常工作?

Spot any errors please? Could there be something else within my CSS blocking this from working correctly?

这是ebays应用中的样子...(抱歉，由于没有10位代表，因此无法嵌入图片)...

Here's what it looks like in ebays app... (sorry can't embed images yet as don't have 10 rep)...

在移动设备上文字变大了

[UPDATE] 但是，如该图片所示，该部分现已固定，现在文本主体的大小调整了.

[UPDATE] Part fixed now where the main body of text does now resize, however, as seen in this picture...

点击查看图片

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

...any text within a table does not resize. Should the existing media query resize this text also, or do I need to add a table tag? If so can someone provide code example please as I've tried by failed. I simply want table text to be reduced in size along with the main body text.

谢谢

[UPDATE] 根据要求的表格...

[UPDATE] Table as per request...

<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] 所有的苏打柳冰雹，谢谢！ :)下面的工作，虽然不确定代码是否正确?我最初将表格字体设置为62.5％，但是这导致文本太小，因此设置为100％并且现在看起来不错.

[UPDATE] All hail sodawillow, thank you! :) The below worked, although not sure if code is exactly as should be? I set table font at 62.5% at first, but this resulted in the text being too small, so set to 100% and looks good now.

在我的手机上看起来还不错，但这只是一个屏幕尺寸，所以请问您需要进行任何更正吗?表格字体是否有100％的不良影响?表格字体也应该添加到@media查询中吗?

Looks fine on my mobile, but that's just one screen size, so do you see any corrections needed please? Any adverse effects from table font being 100%? Should table font also be added to @media queries?

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

推荐答案

这是您可以使用媒体查询进行操作的示例，但这可能不是您想要的，因为我仍然必须明白:).

This is an example of what you can do with media queries, but it may not be what you want since I still have to understand that :).

我所做的样式选择大多很难看，我只想展示媒体查询的基本原理；也许您随后就能解释您的需求.

The style choices I made are mostly ugly, I only wanted to show the basic workings of media queries ; maybe you'll be able to explain what you need then.

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

Open in full page and resize the window horizontally.

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>

这篇关于如何正确使用媒体查询来减小字体大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！