0

OK、最初に、私はJavaScriptにあまり詳しくないので、これが本当にばかげた質問のように思われる場合はご容赦ください...

ウィンドウの高さ(ロゴ、タイトル)に応じてヘッダー項目のサイズを動的に変更し、動的にサイズ変更されたロゴとタイトルの幅に応じてナビゲーション バーを動的に変更するコードを次に示します。

function titlesize (){
  var winsize = {
    width: document.documentElement.clientWidth || window.innerWidth || document.body.offsetWidth,
    height: document.documentElement.clientHeight || window.innerHeight || document.body.offsetHeight
  };

  var titlefont = $(".title");
  var logo= $(".logo");
  var logow = winsize.height * 0.2;
  var logoh = winsize.height * 0.15;
  var titlefontsize = winsize.height * 0.03;
  var titlew = titlefontsize * 7;

  if (winsize.height > 580) {
    logo.css({width: logow, height: logoh});
    titlefont.css('font-size', function(){return (titlefontsize);});
    titlefont.css('width', function(){return (titlew);});
  }
  else {
    var logow = "150";
    var logoh = "100";
    var titlew = "122.5";
    logo.css({width: logow, height: logoh});
    titlefont.css({'font-size': "17.5px", width: titlew});
  }

  if ((winsize.width > 480) && ((winsize.width * 0.9) < (logow + titlew + 420))) {
    $("nav").css({float: "left"});
  }
}
$(document).ready(function() {titlesize(); $(window).resize(titlesize);$(window).load(titlesize);});

説明: タイトル ロゴとテキストを、通常の幅ではなくウィンドウの高さに応じて動的にサイズ変更して、ヘッダー全体が画面を占有しすぎないようにしています (特に横向きのモバイル デバイスで)。

ナビゲーション バーが配置されます: 十分なスペースがある場合は右上 (デフォルト)、またはヘッダーの下 (float:left)。

問題は、ウィンドウのサイズ変更でロゴとテキストのサイズが変更されても、ナビゲーション バーのサイズが変更されないことです。サイズ変更ではなく、リロード時にのみ反応します。何か理由はありますか？

最初の if else ステートメントから派生する動的変数の依存関係が原因であると思われます。簡単な解決策があると確信していますが、何ですか？

助けてくれてありがとう。

PS: jsfiddle を作成しようとしましたが、POST エラーが発生します (フォームの送信などはありません)。

編集と解決策

うまくいかなかった理由を突き止めました: 単に var 宣言を間違えただけです

else関数 vars logowとtitlewの一部を引用符で囲まれた固定値に設定したため、js はそれらを数値ではなくテキストとして受け取りました。したがって、ナビの計算が台無しになりました。これらの vars を数値 ( var logow = 150;) として宣言するとうまくいきました。

それにもかかわらず、あなたの助けと高さのあるメディアクエリの素晴らしいヒントをありがとう!

4

2 に答える 2

1

DominicaJune は正しいです。高さのメディア クエリを使用できます。

http://trentwalton.com/2012/01/11/vertical-media-queries-wide-sites/

于 2012-10-10T19:35:31.950 に答える
0

ドキュメントのサイズ変更を準備完了です。あなたが持っている場合：

$(document).ready(function(){
//some code
});

$(window).resize(function(){
//your resize code
});

常に機能するはずです。メディア クエリははるかに単純に見えますが。

于 2012-10-10T19:42:06.480 に答える