1

私はこのコードを持っています:

function AUTADIV () {
  var BRW = window.outerWidth;
  x = (BRW/1280) * 20
  document.getElementsByTagName("a").style.fontSize = x
}

タグ<a>は既に .css ファイルのこのクラスの下にあります。

a { 
   position:relative;
   z-index:1; 
   color:White; 
   background-color: transparent;
   font-size:20pt;
   text-decoration: none;
   text-shadow: blue 0em 0em 0.4em 
}

画面が大きい人が私のサイトを見ると、背景がすべて表示されますが、フォントが小さすぎます。自動的にサイズを変更する方法はありますか? そうでない場合、どうすればfont-size:20ptJavaScript で変更できますか? 私のコードは、font-size スタイルがインラインの場合にのみ機能し、CSS スクリプトで必要です。

必要なコードがイベントでアクティブになることがわかりましたonResize。

4

3 に答える 3

1

CSS に含める必要がある場合は、実行が難しい場合があります。ただし、JS で動的に変更できる場合は、次のような簡単なテストでこれを実現できます。

（私はjqueryを使用しています）

$.getDocHeight = function(){
    return Math.max(
        $(document).width(),
        $(window).width(),
        /* For opera: */
        document.documentElement.clientWidth
    );
};
if($.getDocHeight>threshhold){ // some threshhold of a max width
    $('a').style('font-size','40pt');
}

これは、通常の js でも実行できます。すべての異なるブラウザーで幅を決定するのは難しいため、関数を含めました。ただし、幅が決まったら、簡単なチェックを行うだけで、アンカー タグのフォント サイズ スタイルを大きくすることができます。フォントがより予測可能になり、ページ サイズに合わせて拡大縮小されないように、静的サイズを使用することをお勧めします。

これは、さまざまなタイプのユーザーを考慮する場合のベスト プラクティスです (たとえば、1 ページにすべてが収まるほどフォントを小さくしたくないモバイル ユーザーなど)。

コードのソース: http://james.padolsey.com/javascript/get-document-height-cross-browser/

于 2012-07-13T00:55:40.347 に答える
0

メディアクエリを使用すると、より良い結果が得られる可能性があります。

@media all and (max-width: 1280px) {
    a{font-size:12pt;}
}

ますます小さいサイズに対してこれを繰り返すことができます。スムーズに移行することはできませんが、JavaScriptは必要ありません（さらに、ウィンドウのサイズを変更すると、テキストサイズの急増に気付かないほど多くの変更が加えられます）。

于 2012-10-05T16:37:05.570 に答える
0

CSSRule-Objectにアクセスして、ルールを変更できます。

詳細：

IE <9： http: //help.dottoro.com/ljcufoej.php
その他： http： //help.dottoro.com/ljdxvksd.php

于 2012-07-13T01:28:18.203 に答える