1

ビューポートのサイズに基づいてテキストのサイズを変更するための次のJSソリューションは非常にエレガントです。

https://stackoverflow.com/a/10295733/1318135

onresize=onload=function(){document.body.style.fontSize=window.innerWidth+"px"}

ただし、2つの問題があります。

  1. サイズ変更されるビューポートに依存します。ページが最初に読み込まれたときにもトリガーしたいのですが、JSの初心者です。

  2. 私のページは完全にem値を使用してコーディングされています。これはpxを使用します。これを使用してデフォルトのemサイズのみを調整するにはどうすればよいですか？これにより、ページ上の他のすべての要素に自動的に細流化されますか？

http://jsfiddle.net/hFNc7/

ありがとう！

4

2 に答える 2

1

  1. 他の回答を参照してください（またはページの下部にhttp://jsfiddle.net/cjzEK/1/を配置してください）

  2. emはそれ自体のサイズではありません。書き方が異なるパーセンテージです。emが機能する唯一の方法は、ブラウザで設定されている1つの基本フォントサイズ（またはリセットされたスタイルシート）があるためです。ブラウザのフォントの通常の基本サイズは16pxです。したがって、このソリューションが行うことは、本体に追加して基本サイズを変更することです（htmlに追加するとさらに良い場合があります）。

たとえばp{font-size:1em;}、リセットを行わないと、16pxになります。1.5emは24pxになります。

于 2012-08-03T16:01:52.197 に答える
1

body'sloadイベントでそのコードを実行する必要があります。onloadこれを行う最も簡単な方法は、属性を介して直接設定することです。

<body onload="var f = function () { document.body.style.fontSize = 0.2 * window.innerWidth + 'px'; }; window.onresize = f; f();">

内容：

  1. フォントサイズを動的に設定できる関数を作成します。
  2. 関数をresizeイベントリスナーとして設定します。
  3. 関数を即座に実行します。

PS：これを書くためのよりエレガントな方法がありますが、あなたの新しいので、より簡単な表記法から始める方が良いかもしれません。

于 2012-08-03T15:59:54.683 に答える