1

CSS の数値属性をパーセント単位で理解するのに問題があります。

この特殊なケースでは、私のページが常に適切に表示されるようにするために、幅、高さ、フォントサイズなどの数値属性を常に % で定義するのが最善の方法であると考えました。

今、私を驚かせたのは、次の点です。

解像度が 1920x1080 でブラウザがフルスクリーン モードの場合、ズームインとズームアウトはfont-size. なんで？parent nodeパーセント値は常に の値を指すと思っていました。

html{
    width:100%;
    height:100%;
}

respfont-sizeのサイズであるため、ズーム時にも静的である必要があります。htmlはbody変わりません。

解像度が 800x600 でブラウザがフルスクリーン モードの場合、明らかにコンテンツが拡大縮小されhtmlます。それbody自体はそれほど高くありませんが、font-size大きすぎます。この比較をお見せしましょう：

ここに画像の説明を入力

font-size明らかに、これは のパーセント値が の高さを参照していないと私に思わせますparent node。したがって、重要な質問は次のとおりです。ページの要素とフォントが通常のノートブックと低解像度のネットブックでうまく表示されるようにしたい場合、値をどのように処理すればよいですか? さらに、ユーザーがズームしたときのページの動作も素敵ですか?

補遺: 一般的な質問のように思われるため、コードは貼り付けていません。

4

1 に答える 1

1

px で直接定義する代わりにsmall、large、x-small、などの値のグループを使用してテキスト サイズを定義できます。x-largeこれにより、より「相対的な」結果が得られます。

私がよく使う別のオプションは pt です。CSS の 1pt は 1/72 インチに相当します。特定の画面でインチがどのように定義されるかは別の問題ですが、これが問題になる可能性のある電話などのデバイスのブラウザーは、これらのことを解決する傾向があります.

最後に、CSS ピクセルはスクリーン ピクセルとは異なることに注意してください。単純ではありません。

出力デバイスのピクセル密度が一般的なコンピューター ディスプレイのピクセル密度と大きく異なる場合、ユーザー エージェントはピクセル値を再スケーリングする必要があります。参照ピクセルは、ピクセル密度が 96 dpi で、リーダから腕の長さの距離にあるデバイス上の 1 ピクセルの視角にすることをお勧めします。

正確には科学的ではありませんか？基本的にこれが意味することは、通常のコンピューター画面と比較してピクセル密度が非常に高い Retina ディスプレイなどについて心配する必要がないということです。これは、ほとんどすべての CSS 測定値が何らかの形で相対的であることを意味します。堅牢で、ほとんどの場合に機能するようにコードを記述しますが、奇妙な問題に遭遇しても驚かないでください。

于 2012-12-08T18:42:20.543 に答える