タイトルが示すように、フォントだけでなく、ページのすべての要素で、古いブラウザーの px フォールバックを使用して REMS を使用して実験しています。テスト Web サイトは test.glow-sticks.org です。
以下の用語のいずれかが正しくない場合はお詫び申し上げます。私は専門家ではありません。
1024 を超える解像度では、(css 内の html) を使用するフォントサイズは 62.5% に設定されているため、単純に 1rem = 10px です。この解像度では、デフォルトのフォントを 1.4rem / 14px にしています。
1680 を超える解像度では、html css は 71.4% に設定されます。このパーセンテージを設定すると、フォントは 14px から 16px になり、もちろんすべての要素が同じパーセンテージで増加します。これは非常にクールで、すべてが完全に同期しているように見えます。
私のコンピューターでは、これまで使用してきた他の多くのテスト プラットフォームと同様に、これは完全に機能しているようです。ただし、私の Web 開発者は自分のマシンで問題に遭遇しているようですが、クロムでのみです。(firefox と IE は影響を受けません)
彼女のマシンでは、解像度を (ネイティブの 1920 から) 1024 に下げると、Web サイトは水平スクロール バーで読み込まれますが、私のマシンでは 1024 で問題なく収まります。クロム検査要素ツールを使用すると、より興味深いものになります。特に Div id=wholepage の 1 つの DIV をチェックしています。1024 画面で表示する場合は幅 960 ピクセル、1680 以上で表示する場合は幅 1097 ピクセルである必要があります。
ただし、彼女の Chrome では、div=wholepage は 1024 解像度で 1152px を表示し、ネイティブの 1920 解像度で 1152px も表示しています。
私のバージョンの Chrome では、同じものを再現するには font-size を 75% に設定する必要があることに気付きました。font-size をページ全体の div に設定しても、1152px にしたいようです。私は 10% を試してみましたが、私のクロムではまったく問題なく、すべてが小さくなりましたが、彼女のマシンでは何も変わりませんでした。変更される唯一のことは、font-size が 10% と表示されていることですが、それは尊重されていないかのようであり、最小で約 75% 上書きされています。
誰でもこれを再現できますか？
彼女が思いつく唯一の修正は、62.5 や 71.4 と同じ増加率を提供する 90% や 103% などのより高いパーセンテージを使用することです。ベースは62.5。