javascript - 使用 JQuery 的响应式设计

Question

所以我的布局在横向上效果很好，但在纵向上根本不起作用。我正在尝试调整代码，以便我有一个纵向的替代布局。然而，我遇到了一些障碍，我忍不住认为必须有一种更简单的方法来做到这一点。

在下面的代码中，您可以看到当内容 (var tent) 比总窗口 (var tots) 长时，正常脚本运行。但是，如果内容比整个窗口短，则样式表会更改并且 div 的高度会调整为填充浏览器的高度。

问题:在不重新加载的情况下调整浏览器大小时，代码不会自动更新。此外，尽管这些行完全相同:

$('#port_photo').height($('#port_photo').width());
$('#port_video').height($('#port_video').width());

#port_photo 尺寸关闭并且在调整浏览器大小之前 div 不是完美的方形。

var extras = 12 + 35 + 35;
var tent = $('#port_title').width() * 3 + extras;
var tots = $(window).height();

  $(window).resize(function () {
    if(tent > tots){ 
        $('#port_desc').height( $('#port_desc').width() * 2 - 3 );
        $('#port_video').height( $('#port_video').width() * 1 );
        $('#port_photo').height( $('#port_photo').width() / 2 );
        $('#port_title, .tit').height( $('#port_title').width() / 1 );  
    }else{
        $('link[href="large2.css"]').attr('href','large2_1.css');
        $('#port_photo').height($('#port_photo').width());
        $('#port_video').height($('#port_video').width());
        $('#port_desc').height($(window).height() - $('#port_photo').width() - $('#port_title').height() - 86);
    }
});

如果我不清楚，请告诉我，我会发布我的网站网址。

Answer 1

感谢@j08691 为我指明了正确的方向。这是我最终使用的代码:

var mq = window.matchMedia( "(max-aspect-ratio: 433/357)" );


if (mq.matches) {
        $('#port_photo').height($('#port_photo').width());
        $('#port_video').height($('#port_video').width());
        $('#port_desc').height($(window).height() - $('#port_photo').width() - $('#port_title').height() - 86);
    } 

if (mq.matches === false) {
        $('#port_desc').height( $('#port_video').width() * 1);
        $('#port_video').height( $('#port_video').width() * 1 );
        $('#port_photo').height( $('#port_photo').width() / 2 );
        $('#port_title, .tit').height( $('#port_title').width() / 1 );  
}

$(window).resize(function () {


    if (mq.matches) {
        $('#port_photo').height($('#port_photo').width());
        $('#port_video').height($('#port_video').width());
        $('#port_desc').height($(window).height() - $('#port_photo').width() - $('#port_title').height() - 86);
    } 

    if (mq.matches === false) {
        $('#port_desc').height( $('#port_video').width() * 1);
        $('#port_video').height( $('#port_video').width() * 1 );
        $('#port_photo').height( $('#port_photo').width() / 2 );
        $('#port_title, .tit').height( $('#port_title').width() / 1 );  
    } 

});