サイト全体のフォント リサイザーを作成しようとしていますが、ほとんどの実装では、サイト全体ではなく、ID またはクラスで要素をターゲットにする必要があるようです。
このCSSで始まるページを設定することで、タスクを達成しようとしています:
- html = 83%
- body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,th,td,etc... = 1em
次に、現在適用されているフォントサイズを取得し、それを増やして再適用するjqueryがあります。
ただし、IE8 または IE7 では機能しません。(ショッカー)
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.05;
$("html").css('cssText', 'font-size: ' + newFontSize + 'px !important');
値を console.log アウトすると、これらのブラウザでは正常に計算されますが、これらのブラウザでは相対的なフォント サイズに問題があるようです。また、すべてを 1em ではなく 100% にリセットしようとしましたが、それもうまくいきませんでした。
jsfiddle の例(ただし、このサイトは ie8 以下では動作しません.....)