Question

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

我正在构建一个首先移动的响应式网站（默认宽度为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）。
使用包含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方法或任何其他解决方案（或其他）的想法和具体代码？我非常感谢你的帮助。

Answer 1

Modernizr可以检查媒体查询是否适用于Modernizr.mq（）函数

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

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

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

Answer 2

您可以尝试使用matchMedia，这样您就可以根据媒体查询加载特定的j。

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

Paul Irish一直在研究一些填充剂

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

希望这有帮助

伊恩

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

2 个答案: