二度目の投稿です。
今回は失敗からなるほど！！！！！が生まれたので
反省含めて載せます
結論から言えば、何もおかしくないし当たり前でした
一箇所だけだしなんでやと思いました
こちらコードです
(base.scss)
html {
font-size: 62.5%;
}
(header.scss)
h1 {
font-size: 3.6rem;
margin: 1.6em 0 1.6em 12em;
@include mq() {
font-size: 2.4rem;
margin-left: 1.6em;
}
}
他の部分は思った通りになるんです、、、
検証ツールで実際何pxになっているのかみてみます
57.6px
どうしてええええええええええw
emのコンパイル後の値ってfont-size × emの値だから
emのコンパイル後の値 ÷ emの値で何倍かわかるのでは？
57.6 ÷ 1.6 = 36
36…あ、font-size!?となりました
あれでも62.5%で指定したのになぜ、、、、、
emとremの知識がごちゃ混ぜになってました
rem
文書のルート要素、つまりhtml要素のfont-sizeを基準にする
remはroot要素
em
親要素のfont-sizeを基準に大きさを計算する
emは親要素
つまり馬鹿だった
当たり前だった、h1ではfont-sizeを上書きしているから
font-size 36pxを基準にemも計算される
36 × 1.6 = 57.6
何もおかしくなかった
私が書いたコードを忠実に再現してくれただけだった
そして学んだfont-sizeを親要素に指定してたらemが思う通りにならないってことは、、、
よく検証ツールとかでみてて疑問だったことがある
なんでいちいちテキスト系divタグとかで囲ってんの？？？
しかも空だし、わからない、、、
これの謎が今回馬鹿をしたことでわかりました
親要素に左右されるので、親要素に当たるところにfont-sizeのrem指定があると良くない
だからdivタグで空の親要素を作ってたのか！！！！！
text系でmarginやpadding取らないようにしようと感じました
すごい初歩的な話ですが間違えて、馬鹿したことで理解が深まりました
これからも頑張ります！
ここまで読んでくれて、ありがとうございます
それでは、また！