レスポンシブデザイン計算機

ブログ記事: 2026年7月11日 数週間前、私のサイトのフォントサイズが、望ましい1.25remではなく、時々1.24924375remになることに気づき、ショックを受けました。もちろん、誰もこれに気づかないでしょう。しかし、私は自分自身に腹を立て、その理由を突き止めたいと思いました。 私のサイトは非常に古いです。サイトを始めた頃、人々はデスクトップコンピューターを使い、ほとんどが640✕480または800✕600のモニターでした。私はブラウザのサイドバー、スクロールバー、ツールバーなどのスペースを確保するために、コンテンツの幅を450pxに設計しました。解像度が上がるにつれて、新しいコンテンツは600px幅で設計しました。 長年、モニターの解像度は上がり続け、その後、携帯電話やタブレットでウェブブラウザが登場したときに縮小しました。私のサイトはそれを考慮していませんでした。 他のウェブサイトがさまざまな画面サイズをどのように扱っているかを調査することにしました。一般的な手法は、「ブレークポイント」を使用してレイアウトを切り替えることでした。 このビジュアライゼーションでは、縦軸はブラウザの幅、横軸はコンテンツとマージンを示しています。 各デバイスの別々のレイアウト 私は複数のレイアウトを維持したくありませんでした。私は、ブラウザの幅に基づいてスムーズに変化し、不連続性のない1つのレイアウトを望んでいました。 ブレークポイント間で補間する1つのレイアウト 2017年に、私はページを1つずつ確認し、固定の450pxまたは600pxレイアウトから新しいレイアウトに移行しました。移行中、私のビルドシステムはすべて3つをサポートしていました。 2020年には、読者の好みのフォントサイズを考慮したいと思いました。px単位からrem単位に切り替えました。数週間前まで、その変換を少し間違っていたことに気づいていませんでした。 調査することにしました。px単位をremに変換する際に、すべてを16で割りました。しかし、中間計算のどこかで、0.625を0.6に丸めていました。 手動でブレークポイントを計算したことで間違いを犯し、すべてを再度手動で計算することで修正しました。 計算を自動化すべきだと判断しました。 インタラクティブな図のためにすでにコードのほとんどを書いていたので、それを計算機に適合させました。 ブレークポイントを入力すると、CSSが生成されます。 ブレークポイントに基づくインタラクティブな計算機 計算機を操作しているうちに、低いブレークポイント（550pxで515.5px）を入力するのが好きではないことに気づきました。2017年のメモを見ると、より基本的な値から低いブレークポイントを実際に計算していたことがわかりました。それは、図上の直線の傾きです。 傾きが⅓ということは、ブラウザの幅が3px増えるごとに、1pxが左マージンに、1pxがコンテンツに、1pxが右マージンに割り当てられるということです。それが最良の比率かどうかはわかりませんが、それが私が使用してきたものです。 最後に行ったことは、計算をCSS内で実行するように移動することでした。これは2017年には不可能でしたが、現在のブラウザではmin()やclamp()のような関数を使用して機能します。 また、図の幅が整数になるようにround()を使用しているため、<canvas>要素が小数サイズにならないようにしています。 CSS計算を使用したレイアウト 全体として、プロジェクトの前半は正当化するのが難しいプロジェクトだったと思います。バグを修正したことでピクセルの一部が変更されただけで、それは誰にとっても問題にならないはずです。 しかし、プロジェクトの後半は潜在的に役立ちます。将来のプロジェクトでレイアウトを他のサイズに適応させるための数式を見つけました。 インタラクティブなビジュアライゼーションをここで試してください[1]。