開発者が非常に長い値をパーセンテージで定義している設計をいくつか見ました。こんなに長い値を書く理由は何だろうと思っています。そして、どのようにしてそのような値を計算/変換するのですか?
例(cssファイルから取得):
.thumbnail { width: 68.08510638297872%; }
table { font-size: 0.9166666666666667em; }
開発者が非常に長い値をパーセンテージで定義している設計をいくつか見ました。こんなに長い値を書く理由は何だろうと思っています。そして、どのようにしてそのような値を計算/変換するのですか?
例(cssファイルから取得):
.thumbnail { width: 68.08510638297872%; }
table { font-size: 0.9166666666666667em; }
ほとんどの場合、SassなどのCSSテンプレートエンジンを使用してコードからスタイルシートを生成し、幅に基づいたパーセンテージ計算を設定しています。
この本では、Responsive Web Design
イーサンマルコットは、開発者が電卓を使用して幅を自分で計算している場合でも、最高の精度を実現するために、パーセンテージベースの幅を計算するときに小数点以下すべての数値を残すことを実際に提唱しています。
編集:私はちょうど本の私のコピーを掘り出しました、そしてここにマルコットの推論があります:
ここで、0.45833333333333emを最も近い正気に見える数値(たとえば、0.46em)に丸めたいと思うかもしれません。ただし、その削除キーには触れないでください。それを見ると目が出血する可能性がありますが、0.458333333333333は、比例して目的のフォントサイズを完全に表しています。さらに、ブラウザは内部で値をピクセルに変換するため、これらの余分な小数点以下の桁数を四捨五入することに完全に精通しています。したがって、より多くの情報を提供することで、最終的にはより良い結果が得られます。
それは、それらの数字が人間によって直接生成されたのではなく、プログラムによって生成されたように私には見えます。スコットランド人はそのようなことをしません。まあ、真のスコットランド人論者はいない:-)
おそらく、それらは読みやすさをあまり気にせず、誰もが出力を手作業で編集することを期待していなかったWYSIWYGレイアウトエディターから来ています。
ほとんどのクライアントは、scalabelfont-sizeとweb-contentを備えたブラウザ内のピクセルパーフェクトなWebサイトを望んでいます。開発者は、レイアウトに完全に一致させるために、長いパーセントを使用しました。
パーセントとemは、ピクセル関連の単位ではなくスケーラブルな単位であり、一部の解像度またはフォントサイズのスケールでは、要素がレイアウトと一致しないため、小数点以下の桁数を増やして正確にすることができます。
ChromeやFirefoxなどの新しいブラウザはフォントと要素を一度にスケーリングします。この問題は発生しませんが、6-7などの古いブラウザにはこの機能がなく、emまたはパーセント単位で学習する必要があります。
この問題を理解するのに役立つことを願っています