私はタイポグラフィを反応させる方法を見つけようとしています。私のコードが続きます。私はdevのツールでリフレッシュするたびに、これは望む結果を持っていないようです。携帯電話、タブレット、ノートパソコン/デスクトップでテキストをうまく表示できるようにするにはどうすればよいでしょうか？応答的なタイポグラフィのメディアクエリ
@media only screen and (min-width: 320px)
{
html {line-height: 1.25em, font-size: 16px;}
h1{line-height: 1.25em, font-size:32px;}
h2{line-height: 1.15384em, font-size:26px;}
h3{line-height: 1.136363em, font-size:22px;}
h4{line-height: 1.111111em, font-size:18px;}
}
HTMLでビューポートメタタグを設定しましたか？
<meta name="viewport" content="width=device-width, initial-scale=1">
さらに、これを簡単にするためにREMを使用しないでください。最初のhtml font-sizeとline-heightを指定し、各クエリのREM値を変更することができます。読んでください：https://css-tricks.com/confused-rem-em/
これを行うにはいくつかの方法があり、それは設計から始まります。フォントサイズと行の高さの値はどこで変更するのですか？何がよさそうだ、いつ悪く見え始めますか？
ブラウザウィンドウを広げて見栄えが悪くなると、メディアクエリやJavaScriptを使用して値をいつ変更するかが決まります。実際には、あなたがそのようなことをするのを助けるjavascriptライブラリがあります（しかし、その名前は私を現時点で逃しています）。
このように、Web開発者は、価値のあるものをデザイナーに変えるメディアクエリを作成することができます。
あなたはcss calc関数を使うことができます。
font-size: calc(1em + 1vw);
として、私は私のプロジェクトではremの代わりemを使用についてここ
https://www.reddit.com/r/web_design/comments/4hhs53/responsive_typography_root_fontsize_calc1vw_1vh/
を話しました。それらの違いはremがドキュメントのルートを常に見ていることです。この場合はhtmlです。
html {
font-size: 1rem;
@media (min-width: 320px) {
font-size: 1.2rem;
}
@media (min-width: 760px) {
font-size: 1.5rem;
}
}
その方法は、すべてのfont-size<html>の内側には、正しい方法で変更されます。