9

画面解像度と画面サイズに依存しないフォントサイズを作成したい1つのアプリケーションに取り組んでいます。フォント サイズは、すべての解像度とすべての画面サイズで同じにする必要があります。javascriptとcssでそれを行う方法は？

ポイントごとのピクセルはハードウェア関連のものだと思うので、javascriptとcssがそれにアクセスできるかどうかはわかりません。

多くの代替手段を試しましたが、正確な解決策を見つけることができませんでした。

4

7 に答える 7

4

pt1/72 インチに基づくポイント ( ) を使用できます。これは伝統的に印刷に由来する単位です。現在、デバイスが適切に構成されているかどうか、このサイズがモニターごとに同じであるかどうかによって異なります。多くの場合そうではありませんが、一部のデバイスは物理的な画面サイズを認識しています。inインチ、センチメートルcm、およびミリメートルも使用できますmm。

emsこのサイズは、相対的なサイズであると組み合わせて使用​​します。そうすれば、必要に応じてサイト全体をスケールアップおよびスケールダウンできます。

body {
    font-size: 12pt;
}
h1 {
    font-size: 2em;
}
p {
    font-size: 1.1em;
}
于 2013-04-26T21:28:39.020 に答える
1

昔ながらのポイントが機能するはずです。

例：

<style>
p
{
    font:15pt;
}
</style>
于 2013-04-26T21:21:06.557 に答える
1

使用されているコンピューターを制御できない限り、ユーザー モニターの実際のサイズを確認できないため、これを行うことはできません。

ユーザーは一度に 2 台のモニターを接続し、画面の同じ要素がそれぞれ異なるサイズで表示されるように設定することができます。

于 2013-04-26T21:22:29.240 に答える
0

他の人が述べているように、フォントサイズを画面解像度から完全に独立させることはできません。できることは、メディア クエリを使用してさまざまな画面サイズをターゲットにし、それに応じてフォントのサイズを変更することです。

body { font-size: 16px; }
@media screen and (min-width: 600px) {
    body { font-size: 112.5%; }
}
@media screen and (min-width: 800px) {
    body { font-size: 125%; }
}
@media screen and (min-width: 1000px) {
    body { font-size: 137.5%; }
}
@media screen and (min-width: 1200px) {
    body { font-size: 150%; }
}

これらは値の例にすぎません。さまざまなサイズでアプリを試して、何が最適かを確認する必要があります。Trent Walton のサイトはその好例です。ブラウザ ウィンドウのサイズを変更して、テキスト サイズがどうなるかを確認してください。

em または rem 単位を使用してすべてのフォントのサイズを変更する場合、本文のフォント サイズを調整するだけで、残りの値は比例してスケーリングされます。

于 2013-10-28T23:29:59.090 に答える
0 
html {font-size: 14px /* in example */}

これは、html のすべての兄弟要素が相対的なサイズを与えることを意味します。

body { font-size: 100% } /* is 14px now */

同じように

div { font-size: 1em } /* should be 14px also */

javascript を使用して html の font-size を変更することも可能で、すべての相対サイズは期待どおりに機能するはずです。jQueryを使用すると、本文のフォントサイズにアクセスして、画面サイズから計算されたサイズに設定できます。動作することでさえ@media () { your css here }、さまざまなデバイスのあらゆる種類のアプリケーションのルールになります。

var fontsize=14+'px';
jQuery('body').css('font-size',fontsize);
于 2013-04-26T21:21:52.490 に答える