글꼴 크기를 줄이기 위해 미디어 쿼리를 올바르게 사용하는 방법은 무엇입니까?

모바일 장치에서 볼 때 글꼴 크기가 줄어들도록 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 내에 다른 것이 제대로 작동하지 못하도록 차단할 수 있습니까?

이베이 앱에서 보이는 모습은 다음과 같습니다 ... (아직 10 개의 담당자가 없으므로 이미지를 삽입 할 수 없습니다) ...

모바일에서 Waaay 텍스트를 크게 표시

[업데이트] 이 그림에서 볼 수 있듯이 텍스트 본문의 크기가 조정되는 부분이 수정되었습니다.

사진을 보려면 클릭

... 표 내의 모든 텍스트는 크기가 조정되지 않습니다. 기존 미디어 쿼리도이 텍스트의 크기를 조정해야합니까? 아니면 테이블 태그를 추가해야합니까? 그렇다면 누군가가 실패한 것처럼 코드 예제를 제공 할 수 있습니다. 본문 텍스트와 함께 표 텍스트의 크기를 줄 이길 원합니다.

감사합니다

[업데이트] 요청에 따른 표 ...

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

[업데이트] 모든 우박 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%; }
}