レスポンシブ対応の際フォントサイズが上手く可変しません

Question

現在ポートフォリオ作成のためwebサイトの作成をしているのですが、レズポンシブ対応の際フォントサイズが上手く可変してくれず困っています。

html側でビューポートの設定

<meta name="viewport" content="width=device-width, initial-scale=1.0">

とcss側でhtml要素にfont-size:62.5%、body要素にfont-size:1.7remを設定しています。

 html {
    font-size: 62.5%;
  }
  body {
    font-size: 1.7rem;
    width: 1200px;
    min-height: 100vh;
    margin: 0 auto;
    background: #000;
    color: #e8e7e7;
  }

メディアクリの設定は以下になります

 @media screen and (min-width: 800px) and (max-width: 1100px) {

    body {
      width: 100%;
    }

  }

画像などはしっかり可変してくれるのですがフォントサイズだけ可変してくれない形です。
初めての質問で上手く伝わるかわかりませんがよろしくお願いします。

Comments

[Jon_do]

@media screen and 以降に
fontサイズを記載していないのだからフォントサイズが変わらないのは当たり前です。
記載漏れでしたら追記をお願いします。

[退会済みユーザー]

まったくその通りでした、お恥ずかしいです...
回答ありがとうございました。精進します

Answer 1

cssのremを使うとメディアクエリがすごく簡単になることが判明

こちらが参考になるかと