15

私は、さまざまな段落にさまざまなサイズを使用する Web ページを開発しています。h... などです。私はemサイズを使用しています: 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番目：そうするためのよりクリーンな方法があるはずだと思う...

問題は、フォントにさまざまなサイズを使用する方法、またはさまざまな解像度に合わせてフォントを調整する方法です。

誰でも助けてもらえますか？ありがとう！

4

5 に答える 5

38

この概念実証 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での動作デモ

于 2012-06-13T10:21:44.880 に答える
4

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

于 2012-06-13T10:18:05.443 に答える
3

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

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

  1. 画面上でテキストを読むのに快適な行の長さなどがあります。スズメバチの巣を蹴りたくはありませんが、約 80 文字としましょう。これらのユニットを使用すると、完璧に感じることができ、その経験を任意のサイズの画面にスケーリングできます.
  2. たとえば、タイポグラフィ ヘッダーとそれに付随するコンテンツのサイズの関係を密接に結び付けることができます。

それらがどのように機能するか

3 つの値のいずれかの 1 単位は、ビューポート軸の 1% です。"Viewport" == ブラウザ ウィンドウ サイズ == ウィンドウ オブジェクト。ビューポートの幅が 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;
}
于 2015-09-28T18:03:11.237 に答える
1

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

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

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

于 2012-06-13T10:25:01.103 に答える
0

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

于 2012-06-13T10:18:14.273 に答える