javascript - 根据屏幕大小调整大小？

Question

我的页面上有一个 Canvas 和一些选项卡:http://www.taffatech.com/Paint.html 现在这些是手动设置的尺寸。我想知道如何根据屏幕尺寸调整它们的大小，因为现在它们在我的屏幕上工作正常但在较小的屏幕上它被裁剪了。

我希望 Canvas 是宽度的 2/3，标签是 1/3，高度是整个屏幕的高度。这可能吗？最好的方法是什么？ CSS，div？查询？我知道如何使用一些 jquery 使 Canvas 成为整个屏幕的大小，但我不确定这是正确的方法所以我来这里问!谢谢!

Answer 1

你可以试试这个:

$("#canvas").css('width', 70 + '%');
$("#canvas").css('height', 100 + '%');
$("#toolbox").css('width', 30 + '%');
$("#toolbox").css('height', 100 + '%');

将其复制到您的 javascript 代码的初始化函数中，如果您认为有必要，您可以为窗口添加一个“调整大小”事件处理程序

$(window).resize(function() {
    $("#canvas").css('width', 70 + '%');
    $("#canvas").css('height', 100 + '%');
    $("#toolbox").css('width', 30 + '%');
    $("#toolbox").css('height', 100 + '%');
});

其中“#canvas”和“#toolbox”分别是 Canvas 和工具箱/ Pane 的 ID。

希望对你有帮助。