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

Question

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

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

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' 分别是画布和工具箱/窗格的 ID。

我希望它有所帮助。