Javascript 如何制作一个动态画布/网格/行/列，以适应浏览器的宽度和高度，同时保持纵横比？

我对javascript、css和html都是新手，但我想学习。问题是，我应该朝哪个方向走还不清楚。我想做一个游戏网站，可以玩几个游戏。我正在尝试制作一个基于浏览器高度和/或宽度的动态大小的游戏板，同时保持其原始的纵横比。它的内部将有一些元素，这些元素的大小也必须与其父元素的大小成比例地减小。我尝试过使用Bootstrap4及其col、row和container类。我正在努力使它与容器类一起工作。我最近遇到了，我看到有人用它来实现这一点。谁能告诉我这里发生了什么事

一个例子是这个网站只需点击play game，在顶部操纵浏览器的高度和宽度，你就会看到它是如何调整大小的，以及所有的子元素。这正是我想要的效果。

---

谢谢。

好的。。也许这会更适合你的需要

var scale = {}, isInitial = true;

window.onresize = function() {
    // make sure the ctx variable is global or visible in current scope in your code
    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
    if (isInitial) {
       isInitial = false;
       scale.width = ctx.canvas.width;
       scale.height = ctx.canvas.height;
    } else {
       scale.x = window.innerWidth / scale.width, scale.y = window.innerHeight / scale.height;
       ctx.scale(scale.x, scale.y);

       // redraw your canvas graphics 
    }
}

请确保：

• 您的画布位置id已修复
• 画布

  top

  和

  left

  属性设置为0

• ctx

  变量可全局访问

---

为什么不使用此解决方案？似乎它解决了你的问题不确定这正是我想要的。你有其他类似的帖子吗。我在寻找1个主“板”，它将根据窗口大小调整大小，里面的所有元素将遵循相同的。然后，主元素可以定位在屏幕上的任何位置，其他所有内容都将随之出现。这正是colonist.io网站正在做的事情。谢谢哈哈，我为殖民者写了所有的前端代码。我很高兴你喜欢我的工作。你解决问题了吗？