私は流動的な Web サイトを持っており、メニューは幅の 20% です。メニューのフォント サイズを適切に測定して、ボックスの幅に常に収まり、次の行に折り返されないようにしたいと考えています。単位として「em」を使用することを考えていましたが、これはブラウザーのフォント サイズに相対的であるため、解像度を変更してもフォント サイズは同じままです。
pts とパーセンテージも試しました。必要なようには機能しません...
どのように進めればよいかヒントをください。
ベストアンサー1
新しい方法
これを実現するにはいくつかの方法があります。
*CSS はビューポートを基準とした寸法をサポートします。
3.2vw = ビューポートの幅の 3.2%
3.2vh = ビューポートの高さの 3.2%
3.2vmin = 3.2vw または 3.2vh の小さい方
3.2vmax = 3.2vw または 3.2vh の大きい方
body { font-size: 3.2vw; }
見るcss-tricks.com/....そしてまた見てくださいcaniuse.com/....
オールドウェイ
使用メディアクエリただし、いくつかのブレークポイントでフォントサイズが必要です
body { font-size: 22px; } h1 { font-size:44px; } @media (min-width: 768px) { body { font-size: 17px; } h1 { font-size:24px; } }ディメンションを使用する% または rem基本フォント サイズを変更するだけで、すべてが変わります。以前の方法とは異なり、毎回 h1 ではなく body フォントを変更するか、基本フォント サイズをデバイスのデフォルトにして、すべてを em 内に残すことができます。
「ルートエムズ」（レム）: 「rem」はスケーラブルな単位です。1rem は body/html のフォント サイズに等しくなります。たとえば、ドキュメントのフォント サイズが 12pt の場合、1em は 12pt に等しくなります。ルート Em は本質的にスケーラブルなので、2em は 24pt、0.5em は 6pt に等しくなります。
パーセント（％）: パーセント単位は、いくつかの基本的な違いを除けば、「em」単位とよく似ています。まず第一に、現在のフォント サイズは 100% に等しくなります (つまり、12pt = 100%)。パーセント単位を使用すると、テキストはモバイル デバイスやアクセシビリティに合わせて完全に拡大縮小可能になります。