web-dev-qa-db-ja.com

解像度に応じてフォントサイズを変更する

私は、さまざまな段落、hなどにさまざまなサイズを使用するWebページを開発しています。私は使っています 全角 サイズ： font-size：2em;、例として。しかし、画面の解像度を低くすると、そのサイズが小さくなります。

そのために、私はこのコードを試しました：

<script>
        if ( screen.width > 1600)
        {
            document.write('<style>#centered h1 { font-size: 2em; } </style>');
        }
        else if (screen.width <= 1600 && screen.width >= 1360)
        {
            document.write('<style>#centered h1 { font-size: 1.7em; } </style>');
        }
        else if (screen.width < 1360 && >= 1024)
        {
            document.write('<style>#centered h1 { font-size: 1.4em; } </style>');
        }
        else
        {
            document.write('<style>#centered h1 { font-size: 0.8em; } </style>');
        }
    </script>

まず、動作しません...
2番目：そうするためのよりクリーンな方法があるはずだと思います...

したがって、問題は、フォントに異なるサイズを使用する方法、またはフォントを異なる解像度に調整する方法ですか？

誰か助けてくれますか？ありがとう！

jqueryhtmlcssscreen-resolution
15
Sonhja

この概念を証明するCSSを使用してみてください。

html { font-size: 62.5%; }
body { font-size: 1em;}

@media (max-width: 300px) {
    html { font-size: 70%; }
}

@media (min-width: 500px) {
    html { font-size: 80%; }
}

@media (min-width: 700px) {
    html { font-size: 120%; }
}

@media (min-width: 1200px) {
    html { font-size: 200%; }
}

動作中 jsFiddleのデモ

37
Vladimir Starkov

JSではなくメディアクエリを使用したい。または、JSを使用して本体にクラスを追加し、それを使用して必要なものをターゲットにします。

4
Rich Bradshaw

Lanzzが指摘したように、画面の解像度に応じてフォントサイズ（emまたはpt）を使用できます。または、「http://www.w3.org/TR/css3-mediaqueries/#width」に従って、cssファイルでメディアクエリを使用することもできます。

@media screen and (min-width: 400px) and (max-width: 700px) { … }

任意の最小幅と最大幅を設定できます。

1
FatalError

最善の解決策はビューポートサイズのタイポグラフィです。

多くの理由があります。ここに2つあります：

  1. 画面でテキストを読むのに快適な行の長さなどがあります。スズメバチの巣を蹴りたくありませんが、80体くらいのキャラクターとしましょう。これらのユニットを使用すると、完璧な感覚を得ることができ、その経験をあらゆるサイズの画面に合わせることができます。
  2. たとえば、活版印刷のヘッダーとそれに付随するコンテンツのサイズ関係を密接に結び付けることができます。

仕組み

3つの値のいずれかの1単位は、ビューポート軸の1％です。 "ビューポート" ==ブラウザウィンドウサイズ==ウィンドウオブジェクト。ビューポートの幅が40cmの場合、1vw == 0.4cmです。

Font-sizeで使用する場合、そのサイズを引き受けるのは1つの「文字」だと思いますが、私たちが知っているように、非等幅フォントでは、文字の幅はかなり任意です。私はあなたがそれをあなたが望むようにそれを得るために値をいじる必要があることを見つけます。とにかく、基本的にどちらを行うのでしょう？

  • 1vw =ビューポート幅の1％
  • 1vh =ビューポートの高さの1％
  • 1vmin = 1vwまたは1vhのいずれか小さい方
  • 1vmax = 1vwまたは1vhのいずれか大きい方
h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}
1
christian vazquez

emサイズは、親要素のサイズを基準にしています。フォントサイズをpt単位（1pt = 1/72インチ）で設定することをお勧めします。これは解像度に依存せず、どの解像度でも同じ見かけのサイズに見えるように設計されています。

0
lanzz