Question

好的，首先，我对javascript并不熟悉，所以请原谅，如果这似乎是一个非常愚蠢的问题......

这是我的代码，根据窗口高度（徽标，标题）和导航栏动态调整标题项的大小，具体取决于动态大小的徽标的宽度＆amp;标题：

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);});

解释：我有一个标题徽标和文字根据窗口高度动态调整大小而不是通常的宽度，这样整体标题不会占用太多屏幕（特别是在移动设备上）横向）。

然后会放置导航栏：如果有足够的空间（默认），或者在标题下方（浮动：左），则右上角。

问题是：窗口调整大小确实调整了徽标和文本的大小，但导航条没有。这只会对重新加载做出反应，而不是对调整大小做出反应。有什么理由吗？

我怀疑这是因为从第一个if else语句派生的那些动态变量的依赖性。我很确定有一个简单的解决方案，但是什么？

感谢您的帮助。

PS：试图制作一个jsfiddle，但它给了我POST错误（不明白为什么，没有表单提交或类似的东西）

编辑＆amp;解

弄清楚它为什么不起作用：只是在var声明中犯了错误

我在函数vars logow 和 titlew 的else部分设置为引号中的固定值，因此js采取了它们是文本而不是数字。因此，导航的计算刚刚搞砸了。将这些变量声明为数字（var logow = 150;）就可以了。

尽管如此，感谢您的帮助以及对媒体查询的高度暗示！

Answer 1

DominicaJune是对的。您可以使用媒体查询高度：

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

Answer 2

你准备好把文件大小放在文件中。如果你有：

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

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

它应该一直有效。虽然媒体查询看起来更简单。

jQuery只调整部分工作

2 个答案: