0

好的，首先，我不太熟悉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 将它们视为文本而不是数字。因此，导航的计算就搞砸了。将这些变量声明为数字 ( var logow = 150;) 就可以了。

尽管如此，感谢您的帮助和高度媒体查询的重要提示！

4

2 回答 2

1

多米尼克六月是对的。您可以对高度使用媒体查询：

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 回答