WCAG（アクセシビリティ）宣言のためにvwユニットで使用すると、どのようにしてフォントサイズを大きくすることができますか？

Question

私は自分のウェブサイトにCSSスタイルシートを書き、 "vw"と "vh" CSSユニットを大量に使用しています。 ブラウザの拡大鏡でフォントサイズを拡大（サイズ変更）しようとしているときや、Ctrl +マウスでスクロールするときに、フォントサイズが拡大せず静的に留まることに気付きました。 私はこのウェブサイトにアクセス（AAレベル）にする必要があり、主要な要件の一つは

（1.4）あなたのサイトを増やすテキストサイズによく反応することを確認し

ですがhereからそれを手に入れました。

"rem"または "em"を使用するとサイズを変更できますが、 "vw"ユニットを使用する場合の最大のアドベンチャーであるウィンドウのサイズを変更すると "伸びた"効果はありません。

どうすればこの問題を解決できますか？どのように私は両方のものを得ることができますか？テキストのサイズを変更して、画面のテキストのアスペクト比を維持しますか？

ありがとうございました。

Answer 1

vhおよびvwユニットは、WCAGと互換性がある場合はfont-sizeには使用しないでください。

期待される動作をさせたい場合は、javascriptを使用するだけです。

Answer 2

ビューポート単位をユーザーのフォントサイズの設定に応じて縮尺することは非常に簡単です。 calc()を使用して、ビューポート単位と相対単位を組み合わせるだけです。例えば：

.example { 
    font-size: calc(1rem + 1.5vw); 
} 

これもわずかアクセシビリティ以上のために通常有用である1rem（16px）の最小フォントサイズを設定するの追加ボーナスを有します。

スケールの割合を制御する他の方法もありますが、これはこの質問の対象外です。ちょうどgoogle '流体タイポグラフィー'と私が話しているテクニックを見つける必要があります。