& # 39; Media-queries& # 39;对于不同的代码不同的视口高度/宽度

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

本文关键字：视口 高度 宽度 代码 Media-queries 于不同      更新时间：2023-09-26

问题

我使用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。

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

有没有人可以帮助我/透露一些关于如何管理我的脚本这种方式。我知道有关于管理CSS的媒体查询，但我似乎找不到任何关于如何以这种方式管理javascript的资源-希望有人可以帮助。

欢呼,史蒂夫。

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

我添加了一个在加载和调整大小时使用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 screen and (max-width: 300px) {
body {
    background-color: lightblue;
}
}

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

对于纯js，你可以通过屏幕获得屏幕宽度。宽度

相关文章：