特定のブラウザサイズの時だけ、cssでvw単位を使ったフォントサイズが動作しない

Question

以下のcssでブラウザを399px以下にすると、.post_titleのフォントサイズがhtmlに設定されているサイズと同じになってしまいます。
400px以上だと、問題なく大きなフォントサイズで表示できています。
どこに問題があるでしょうか？

@media screen and (min-width:400px){
	html { font-size: calc(100vw / 26);}
	.post_title {font-size: calc(100vw / 14); font-weight: bold;}
	h1 { font-size: calc(100vw / 16);}
	h2 { font-size: calc(100vw / 20);}
	h3,h4,h5,h6 { font-size: calc(100vw / 26);}
}
@media screen and (min-width:700px){
	html { font-size: calc(100vw / 34); }
	.post_title {font-size: calc(100vw / 24); font-weight: bold;}
	h1 { font-size: calc(100vw / 26);}
	h2 { font-size: calc(100vw / 28);}
	h3,h4,h5,h6 { font-size: calc(100vw / 34);}
}
@media screen and (min-width:920px){
	html { font-size: 16px;}
	.post_title {font-size: calc(100vw / 26px); font-weight: bold;}
	h1 { font-size: 24px;}
	h2 { font-size: 22px;}
	h3,h4,h5,h6 { font-size: 16px;}
}

Answer 1

メディアクエリの指定がmin-width: 400px;となっているためです。
400px以上の時にスタイルを指定という意味なので、399px以下にはそもそもスタイルが当たっていません。
よってhtmlに設定されている(スタイルが適応される)フォントサイズになっています。

Comments

[RyoUY]

ありがとうございます。その通りですね。。なぜかそのことに気がつきませんでした。大変助かりました。