'Media-queries' for javascript - 不同视口的不同代码 height/widths

Question

问题

我正在使用 javascript 来计算元素的宽度以实现我想要的布局。问题是，我不想在较小的屏幕尺寸 上加载代码（例如当屏幕宽度小于 480px 时）。我希望它能在加载和 browser/viewport 调整大小时工作。

我会考虑使用小屏幕设备 'the default' 并从那里着手。所以，默认调用下面的脚本none，那么如果浏览器宽度大于480px（例如），就会调用下面的脚本：

代码

$(document).ready(function() {

    //Get the figures width
    var figure_width = $(".project-index figure").css("width").replace("px", "");

    //Get num figures
    var num_figures = $(".project-index figure").length;

    //Work out how manay figures per row
    var num_row_figures = Math.ceil(num_figures / 2);

    //Get the total width
    var row_width = figure_width * num_row_figures;

    //Set container width to half the total
    $(".project-index").width(row_width);

    x = null;
    y = null;

    $(".project-index div").mousedown(function(e) {
        x = e.clientX;
        y = e.clientY;
    });

    $(".project-index div").mouseup(function(e) {
        if (x == e.clientX && y == e.clientY) {
            //alert($(this).next().attr("href"));
            window.location.assign($(this).next().attr("href"));
        }
        x = y = null;
    });

});

// Drag-on content
jQuery(document).ready(function() {
    jQuery('#main').dragOn();
});

多余的位

大屏幕上的细微差别与 browser/viewport 高度有关。这是关于行的：

var num_row_figures = Math.ceil(num_figures / 2);

你可以看到一旦计算有一个值，它就会将它除以 2。我只希望当 browser/viewport 高度超过一定数量时发生这种情况 - 比如 600px。

如果这是第一个状态，我会很高兴，如果高度大于 600px，则该值除以 2 更容易。

任何人都可以帮助 me/shed 了解如何以这种方式管理我的脚本。我知道有用于管理 CSS 的媒体查询，但我似乎无法找到任何有关如何以这种方式管理 javascript 的资源 - 希望有人能提供帮助。

干杯，史蒂夫

Answer 1

 @media screen and (max-width: 300px) {
body {
    background-color: lightblue;
}
}

所以我搜索了一下，想出了这个来自 w3 学校的例子。http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_media_example1 我认为这是你正在努力实现的目标。

对于纯js，可以通过screen.width

获取屏幕宽度

Answer 2

您可以使用 window.matchMedia, which is the javascript equivalent of media queries. The matchMedia call creates a mediaQueryList 对象。我们可以查询 mediaQueryList 对象匹配属性以获取状态，并使用 mediaQueryList.addListener 附加事件处理程序来跟踪更改。

我在 fiddle 上添加了一个在加载和调整大小时使用 matchMedia 的示例。更改左下方窗格的高度和宽度（使用边框），并查看两个查询的状态。

这是我用过的代码：

<div>Min width 400: <span id="minWidth400"></span></div>
<div>Min height 600: <span id="minHeight600"></span></div>

var matchMinWidth400 = window.matchMedia("(min-width: 400px)"); // create a MediaQueryList
var matchMinHeight600 = window.matchMedia("(min-height: 600px)"); // create a MediaQueryList

var minWidth400Status = document.getElementById('minWidth400');
var minHeight600Status = document.getElementById('minHeight600');

function updateMinWidth400(state) {
    minWidth400Status.innerText = state;
}

function updateMinHeight600(state) {
    minHeight600Status.innerText = state;
}

updateMinWidth400(matchMinWidth400.matches); // check match on load

updateMinHeight600(matchMinHeight600.matches); // check match on load

matchMinWidth400.addListener(function(MediaQueryListEvent) { // check match on resize
    updateMinWidth400(MediaQueryListEvent.matches);
});

matchMinHeight600.addListener(function(MediaQueryListEvent) { // check match on resize
    updateMinHeight600(MediaQueryListEvent.matches);
});

'Media-queries' for javascript - 不同视口的不同代码 height/widths

'Media-queries' for javascript - different code for different viewport height/widths

javascript

jquery

resize

viewport