在响应式设计中有条件地加载 javascript答案

【问题标题】：Conditionally loading javascript in responsive design在响应式设计中有条件地加载 javascript
【发布时间】：2012-02-10 06:02:03
【问题描述】：

我正在尝试做一些我认为应该非常简单的事情，但我还没有找到对解决方案的简单解释。

我正在构建一个移动优先的响应式网站（默认为 320 像素宽度）。在这么小的分辨率下，站点是一列，我很高兴允许每个单独的“盒子”扩展或收缩到内部内容的自然高度。

但是，在站点扩展到三列的较大分辨率下，我想添加一个小的 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“加载”功能（正式名称为yesnope.js）。
使用包含 Nicholas Zakas “isMedia”函数的自定义函数，如此链接Media Specific Javascript 或
使用“screenWidth”变量的自定义 javascript 函数，如
var screenWidth = (screen.width < 768) ? true : false;
如Media queries in the real world 中所述

由于我对 JavaScript 的了解有限，我无法实际编写代码来让这些方法中的任何一种都适用于我的脚本。有谁能帮帮我吗？

我对方法没有特别的偏好，我只是希望它能够跨浏览器等工作。我的感觉是 modernizr 方法是最强大和最稳定的方法，可以使这项工作在最多的情况下工作用例，但我不完全确定。我从未修改过modernizr，所以我不确定如何编写以及将自定义加载功能放在哪里。

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

【问题讨论】：

当你可以构建适当的 CSS 时为什么要使用 Javascript（也许将常见的东西整理到一个文件中，为各种分辨率设置单独的文件）？在我看来是一个相当简单的解决方案。

标签： javascript web responsive-design

【解决方案1】：

Modernizr 可以使用 Modernizr.mq() 函数检查媒体查询是否适用

您将您希望它像这样匹配的媒体查询传递给它

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

这里一旦最小宽度超过 768px，那么函数内部的代码就会被调用，所以对于你来说，等高代码。

【讨论】：

这正是我想要的。有效。谢谢。关于 Ed 的评论，仅仅在静态 css 中进行更改并没有考虑到内容是动态生成并随时间变化的情况。如果您的 div 正在填充来自 Web 服务或 ajax 调用的内容，或者甚至像特色内容框这样简单的东西，您不知道在任何给定时刻的相对高度将是多少。无论内容如何随时间变化，Javascript都会对布局进行适当的调整。
很高兴为您提供帮助。如果您不介意，可以将我的答案设置为已接受的答案。谢谢

【解决方案2】：

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

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

Paul Irish 一直在研究一些 polyfills

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

希望对你有帮助

伊恩

【讨论】：