margin,paddingをremに指定し、メディアクエリで切り替えた時の動きついて

Question

前提・実現したいこと

PC用のレイアウトのコーディングを先に行っており、メディアクエリを利用してある画面幅になった時にスマホ用のレイアウトに切り替わるようにしています。PC用のレイアウトのhtmlタグに"font-size: 62.5%;"を記述し、"1rem=10px"になるようにしています。またmargin,paddingも同じくremで指定しています。
問題はスマホ用のレイアウトに切り替わる時です。
スマホ用ではPC用より文字サイズとmargin,paddingを小さくしたいと思っているので、スマホ用スタイルシートのhtmlタグに”font-size:55.6%;”を記述しました。私の認識ではこのように記述することで、スマホ用スタイルシートで再び小さいサイズを記述しなくても、先ほどPC用でremを指定した部分(文字サイズとmargin,padding)に”55.6%”が適用され、勝手にサイズが小さくなると考えていました。
しかし結果としては、文字サイズは希望通り小さくなりましたがmargin,paddingはPC用で指定したサイズのまま変わりませんでした。

この認識が間違っているのか、調べてもよくわからなかったので質問させて頂きました。よろしくお願いいたします。

該当のソースコード

全て記載すると長くなってしまうので、一部を抜粋しています。

PC用スタイルシート

*{
  box-sizing: border-box;
  line-height: 1.5;
  list-style: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

html{
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body{
  background-color: #fafafa;
  color: #050505;
  font-family: sans-serif;
  font-size: 1.8rem;
}

/*----------------------------------
共通のスタイル
----------------------------------*/
.sp{
  display: none;
}

.pc{
  display: block;
}

.flex{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.align-items{
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.justify-content{
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/*----------------------------------
ヘッダー
----------------------------------*/

header{
  background-color: rgba(250, 250, 250, 0.9);
  color: #050505;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

.btn_menu{
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.btn_menu .box_logo{
  margin-left: 2rem; /*20px*/
}

 .logo_img{
  vertical-align: bottom; /*画像下の余白を埋める*/
  width: 100%;
  height: auto;
}

.menu_space{
  padding: 1.5rem 0; /*15px 0*/ /*0.8% 0*/
  margin-right: 2rem; /*20px*/ /*1%*/
  width: 20.8%; /*400px*/
  min-width: 300px;
}

.menu_space ul{
  width: 90%; /*360px*/
  min-width: 260px;
}

.menu_space ul li{
width: 44.4%; /*160px*/ /*44.4%*/
min-width: 110px;
margin: 0 1rem; /*10px*/ /*0 2.3%*/
}

.btn_link{
  display: inline-block;
  background-color: #00bbff;
  border-radius: 5px;
  box-shadow: 2px 2px #000064;
  color: #050505;
  padding: 1.15rem 0; /*11.5px*/ /*7.2% 0*/
  text-align: center;
  width: 100%;
}

.btn_link:hover{
  background-color: #4ccfff;
  box-shadow: none;
  color: #525252;
  position: relative;
  top: 4%; /*2px*/
  left: 0.6%; /*2px*/
}

/*-------------------------------------
ハンバーガーメニュー
-------------------------------------*/
#nav-open {
  display: inline-block;
  width: 3rem; /*30px*/
  padding-bottom: 2.8rem; /*28px*/
  vertical-align: middle;
  margin-left: 1rem; /*10px*/
  z-index: 4;
  cursor: pointer;
}

/*ハンバーガーアイコンをCSSで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  transition: all 0.4s;
  padding-bottom: 0.4rem; /*線の太さ*/ /*4px*/
  width: 3rem;/*長さ*/ /*30px*/
  border-radius: 3px;
  background: #050505;
  display: block;
  content: '';
  cursor: pointer;
  z-index: 5;/*最前面*/
}

#nav-open span:before {
  top: 300%; /*12px*/
}

#nav-open span:after {
  top: 600%; /*24px*/
}

/*クリック時に三本線を動かす*/
#nav-open.active span {
  -webkit-transform: translateY(300%) rotate(-45deg); /*12px*/
  transform: translateY(300%) rotate(-45deg);
}

#nav-open.active span:before {
  -webkit-transform: translateY(-600%) rotate(45deg);/*打ち消す* /*-24px*/
  transform: translateY(-600%) rotate(45deg);/*打ち消す*/
  opacity: 0;
}

#nav-open.active span:after {
  -webkit-transform: translateY(-600%) rotate(90deg); /*-24px*/
  transform: translateY(-600%) rotate(90deg);
}

/*中身*/
#nav-content{
  background-color: #00bbff;
  color: #050505;
  width: 32.6rem;/*最大幅*/ /*326px*/
  overflow: auto;
  padding: 0 2rem; /*20px*/
  position: fixed;
  top: 0;
  right: -32.6rem; /*-32.6rem*/
  -webkit-transition: .3s ease-in-out;/*滑らかに表示*/
  transition: .3s ease-in-out;
}

#nav-content.open {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 3;/*最前面に*/
}

.hamburger-top {
  padding: 2rem 0; /*20px*/
}

#nav-content .menu_ttl{
  border-bottom: 1px solid #050505;
  font-size: 2.4rem;
  margin-bottom: 2rem; /*20px*/
  }

.link li{
  text-indent: -1em;
  position: relative;
  left: 1em;
}

.link li:not(:last-of-type){
  display: block;
  margin: 2rem 0; /*20px 0*/
}

.link li:last-of-type{
  margin-bottom: 4.15rem; /*41.5px*/
}

.link a{
  background-color: #00bbff;
  color: #050505;
}

.link li::before{
  font-family: "Font Awesome 5 Free";
  content: "\f0da";
  font-weight: 900;
  margin-right: 1rem; /*10px*/
}

#nav-content a:hover{
  background-color: #00bbff;
  color: #f0f0f0;
}

/*閉じる用の薄黒カバー*/
#nav-bg {
background-color: #9f9f9f;
color: #050505;
display: none;/*はじめは隠しておく*/
height: 100%;
left: 0;
opacity: 0;
position: fixed;
top: 0;/*全体に広がるように*/
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
width: 100%;
z-index: 2;
}

#nav-bg.show{
  display: block;
  opacity: 0.5;
}
}

スマホ用スタイルシート

@media (max-width: 375px){

  *{
    line-height: 1.7;
  }

  html{
    font-size: 55.6%;
  }

  /*----------------------------------
  共通のスタイル
  ----------------------------------*/

  .sp{
    display: block;
  }

  .pc{
    display: none;
  }

  .point_mainttl, .casualclass_ttl, .qa_ttl, .guide_ttl{
    font-size: 2.444rem;
    width:90%;
  }

  .point_ttl, .casualclass_ttl, .qa_ttl, .guide_ttl{
    width: 90%;
    margin:0 auto 40px auto;
  }
  /*----------------------------------
  ヘッダー
  ----------------------------------*/

  header{
    position: fixed;
  }

  .btn_menu{
    justify-content: flex-start;
  }

  .btn_menu .box_logo{
    /* margin-left: 10px; */
    
  }
}

Comments

[m.ts10806]

検証・再現可能なコードを質問本文にご提示ください。

[Chischoco]

mts10806さん、ご回答ありがとうございます。
申し訳ございません、分かりくかったですね。
コード追加いたしました。よろしくお願いいたします。

[x_x]

ブラウザと、最小フォントサイズ設定はどうなっているでしょうか？

Answer 1

PCとスマホで文字サイズを、remで固定するのであれば、単に各htmlに「px」で任意数値をリセットするだけで良いのでは？

Answer 2

スマホは、デバイスによって、100%時のフォントの大きさが違う
からです。なぜなら、デバイスによって、画面の実寸も違えば、解像度（ppi）も違うからです。
よって、100%がどのデバイスも16pxだったとしても、その16pxが、デバイスによって見え方（見かけの大きさ）が違います。
ちなみに、PCは、何もしていなければ、100% = 16pxになります。

なので、デバイスが変わっても、画面サイズに対してだいたい同じ見え方の比率にするためには、
vwを使うのが一番妥当かと思います。
（画面横幅の大きさに対して何%の比率かという大きさを指定できる単位）
なので、iPhone 7を基準に、
画面の幅に対して、だいたい14pxっぽく表示したいって時は、
14 / 350（iPhone 7の横幅の論理ピクセル値） * 100で比率をとり、

html {
  font-size: 4vw;
}

とします。
10pxっぽくしたいのなら、10 / 350 * 100の数値を入れます。
iPhone 7以外のデバイスを基準にしたければ、
他のデバイスの論理ピクセル値を調べ、350のところにその数値を入れて計算します。