Question

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

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

Answer 1

你可以试试这个：

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

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

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

其中＆＃39;＃canvas＆＃39;和＃工具箱＆＃39;分别是画布和工具箱/窗格的ID。

我希望它有所帮助。

根据屏幕尺寸调整大小？

1 个答案: