How to use media queries correctly to reduce font

Question

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.

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

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

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

Text waaay to big on mobile

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

Click to view pic

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

Thank you

[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] 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.

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

Answer 1

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>