レスポンシブデザインにEMとパーセンテージを使用するにはどうすればよいですか？

Question

私は最終的にレスポンシブデザインを学びました。私はemと測定単位のベストプラクティスを知る必要があります。本文のfont-sizeを10pxに設定すると、すべてのフォントサイズを宣言する行に問題が発生しますか（1em = 10px、2.5em = 25pxなど）

また、em単位とパーセントを使用する正しい時刻はいつですか？主にタイポグラフィのためのユニットであり、パーセンテージはサイジング、マージン、パディングなどに使用されますか？

本文のフォントサイズを変更することで、メディアクエリでフォントサイズを比例させることができますが、テキストのサイズに基づいてレイアウトやスペースを移動したいとは思っていません。私は？）。

Answer 1

ブラウザのフォントサイズ設定がデザインに影響を与えるようにすることをお勧めします。本体のfont-sizeをピクセル単位で設定しないでください。

remは、すべてがブラウザのfont-sizeに比例するようにするために最適です。 emユニットは親要素のfont-sizeに基づいて計算されるため、要素が入れ子になったときに使用するのが難しくなります。 remは、常にhtml要素（ルート要素）のfont-sizeに相対的です。 1rem = 16pxと仮定し、それに関連してすべてを構築すると、たとえば、ユーザーが1rem = 20pxになるようにブラウザを設定しても、デザイン全体がそれに応じてスケールアップされます。

レスポンシブデザインでは、一般的なデバイスに基づく任意の幅ではなく、コンテンツが使用できなくなる画面幅でメディアクエリ "ブレークポイント"を定義することをお勧めします。ブラウザのフォントサイズの変更によってサイト全体が拡大または縮小された場合、ブレークポイントもそのフォントサイズを尊重する必要があります。ただし、Safariは他のブラウザと異なるようにremメディアクエリを処理するため、best to use em for media queriesです。

Answer 2

okですが、まずレスポンシブデザインを使用する場合は、ブートストラップやフォンダリングのようなフレームワークを使用してレスポンシブデザインを行うことを強くお勧めします。あなたはそんなやり方で初心者のように思えますし、応答性は最も複雑なケースのためのCSSとプリプロセッサの束です。

しかし、あなたの質問に答えるために、ほとんどの場合、メディアクエリでフォントのサイズを変更しません。あなたのフォントをremで設定します。多くのデバイスで応答性をテストする必要があります。レイアウトでは、おそらくdivを意味する必要があります。 viweport vw（幅）とvh（高さ）は、annother要素内に比例尺度が必要な場合を除いてベストプラクティスです。その場合は、％を使用してください。 Remはrootよりも優れています。フォントの真のサイズはhtmlで異なります。デバイスの画面が小さくなり過ぎると、メニューが折りたたまれている必要があります。また、サイトのテキストはdiv内で下に移動する必要があります。私はこれをしばらく続けてもいいが、私が言ったように、フレームワークを使って、より早く学習し、より速く開発する。私のようなほとんどの開発者は、クライアントのためにフレームワークを使用します。