Question

问题

我正在使用javascript来计算元素的宽度，以实现我之后的布局。问题是，我不想在较小的屏幕尺寸上加载代码（例如，当屏幕宽度小于480px时）。我希望这可以在加载和浏览器/视口大小调整时工作。

我认为小屏幕设备是默认设备，并从那里开始工作。因此，默认情况下不会调用以下脚本，如果浏览器宽度大于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();
});

额外位

较大屏幕上的细微差别与浏览器/视口高度有关。这与线路有关：

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

一旦计算得到一个值就可以看到，它将它除以2.我只想在浏览器/视口高度超过一定数量时发生这种情况 - 比如600px。

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

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

干杯，史蒂夫

Answer 1

您可以使用window.matchMedia，这是与媒体查询相当的javascript。 matchMedia调用创建一个mediaQueryList对象。我们可以查询mediaQueryList对象匹配属性来获取状态，并使用mediaQueryList.addListener附加事件处理程序来跟踪更改。

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

这是我用过的代码：

<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);
});

Answer 2

 @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

获取屏幕宽度

针对javascript的“媒体查询” - 针对不同视口高度/宽度的不同代码

2 个答案: