jquery - 获取一个容器以缩放到 em 中的浏览器窗口大小

Question

我有一个容器div，我想根据加载时浏览器窗口的大小来调整大小。我使用em's 表示高度和宽度。

这就是我所拥有的，但我不知道为什么它不起作用：

$(document).ready(function () {
    var windowwidth = $(window).width();
    var windowheight = $(window).height();
    var bodyfontsize = $('body').css(font - size);

    var adjustedwidth = (1 / bodyfontsize) * windowwidth;
    var adjustedheight = (1 / bodyfontsize) * windowheight;

    $('#container').width(adjustedwidth 'em').height(adjustedheight 'em');
});

我做错了什么，我应该怎么做才能解决这个问题？

Answer 1

这应该为您解决问题

$(document).ready(function () {
    var windowwidth = $(window).width();
    var windowheight = $(window).height();
    var bodyfontsize = $('body').css("font-size").replace("px", "");

    var adjustedwidth = (1 / bodyfontsize) * windowwidth;
    var adjustedheight = (1 / bodyfontsize) * windowheight;

    $('#container').width(adjustedwidth + 'em').height(adjustedheight + 'em');
});

jsFiddle 演示

Answer 2

使用像素代替宽度和高度。除了字体大小，我从未将 em 用于任何其他用途。

$(document).ready(function () {
    var windowwidth = $(window).width();
    var windowheight = $(window).height();

    var adjustedwidth = windowwidth;
    var adjustedheight = windowheight;

    $('#container').width(adjustedwidth).height(adjustedheight);
});