有条件地在响应式设计中加载JavaScript

我正在尝试做一些我认为应该非常简单的事情，但是我没有找到解决方案的简单解释。有条件地在响应式设计中加载JavaScript

我在建立一个首先移动的响应式网站（默认320px宽度）。在这个小的分辨率下，网站只有一列，我很乐意让每个“盒子”扩展或收缩到内部内容的自然高度。

但是，在站点扩展为三列的较大分辨率下，我想添加一个小的Javascript函数来均衡每列的框的高度。我所说的功能是这样的：

jQuery(document).ready(function() { 
    setHeight('#inner-footer .widget-area'); 
}); 

var maxHeight = 0; 
function setHeight(column) { 
    //Get all the element with class = col 
    column = $(column); 
    //Loop all the column 
    column.each(function() {  
     //Store the highest value 
     if($(this).height() > maxHeight) { 
      maxHeight = $(this).height();; 
     } 
    }); 
    //Set the height 
    column.height(maxHeight); 
}

我发现不同的方式来做我在说什么。

我可以使用modernizr“load”函数（形式上是yesnope.js）。
使用如在此链接描述并入尼古拉斯Zakas“isMedia”功能自定义函数Media Specific Javascript或
JavaScript时使用的“屏幕宽度”可变功能如
var screenWidth = (screen.width < 768) ? true : false;
如Media queries in the real world

描述的自定义

由于我的javascript知识有限，我一直无法真正编写代码来获取任何这些方法来为我的脚本工作。有人可以帮我从这里出去吗？

我有办法没有特别的偏好我只是希望它的工作跨浏览器，等我的感觉是，Modernizr的方法是使在用例数最多这项工作的最强大和稳定的方式，但我对此并不完全确定。我从来没有修改过modernizr，所以我不确定如何编写以及在哪里放置自定义加载函数。

任何人有modernizr方法或任何其他解决方案（或其他解决方案）的想法和具体代码？我非常感谢帮助。

来源

2012-01-14 user1148975

为什么使用JavaScript时，你可以构建相应的CSS（也许戏弄将常见的东西放到一个文件中，具有各种分辨率的单独文件）？对我来说似乎更简单的解决方案。 – 2012-01-14 06:52:50

Modernizr的可以检查媒体查询申请与Modernizr.mq（）函数

你通过它，你希望它匹配这样

if(Modernizr.mq('all and (min-width: 768px)')) { 
    // Equal height code here 
}

这里曾经最小宽度为您的媒体查询过去768px，那么函数中的代码将被调用，所以对于你来说，等高代码。

来源

2012-01-14 08:44:30 ianckc

这正是我正在寻找的。有效。谢谢。 – user1148975 2012-01-14 14:59:21

这正是我正在寻找的。有效。谢谢。关于Ed的评论，只是对静态css进行更改并没有考虑到内容是动态生成并随时间变化的情况。如果你有divs充满了来自web服务或ajax调用的内容，或者甚至像特色内容框那样简单，你不知道在任何特定时刻相对高度会是什么。无论内容如何随时间变化，Javascript都会对布局进行适当的调整。 – user1148975 2012-01-14 15:14:34

很高兴帮助。如果你不介意你能否将我的答案设定为已接受的答案。谢谢 – ianckc 2012-01-14 18:45:52

您可以尝试使用matchMedia，这将允许您根据媒体查询加载特定的js。

https://developer.mozilla.org/en/DOM/window.matchMedia

保罗爱尔兰一直致力于对一些polyfills

https://github.com/paulirish/matchMedia.js/

希望这有助于

伊恩

来源

2012-07-13 10:39:17 iancrowther

有条件地在响应式设计中加载JavaScript

回答

相关问题