javascript - 响应式网页——高度设计

Question

如果这个问题听起来更像是在寻求意见或讨论，我提前道歉。

我正在使用 Raphael 库而不是 Canvas 设计一个游戏类型的页面。我的第一个设计决定是所有内容的使用百分比，这样它就可以利用所有或大部分可用屏幕，而不管使用的分辨率如何(现在，我知道这几乎是不可能实现的)。

当我读到响应式设计时，我总是听到关于宽度的设计，这真的很有意义，因为内容可以上下浏览。但是，考虑到高度的设计又如何呢？如果我希望无需垂直滚动即可访问此游戏中所需的所有信息怎么办？

这里的标准做法是什么？它是具有预定义元素尺寸并为最流行的分辨率设计的媒体查询路由吗？或者，是否真的有可能创建一个以百分比表示大小的复杂系统？

伙计，这听起来确实是基于意见，但我希望有一篇指南或文章讨论了我错过的这个主题。

Answer 1

如果您使用的是处理 SVG 的库(Raphael 似乎就是这样做的)，则不一定非要使用百分比。相反，您可以将 SVG“ Canvas ”元素的大小设置为您想要的任何大小。

为了让您的游戏填满 100% 的空间，您可以将所有图形放入 g element 中，使用 Raphael(如果 Raphael 出于某种原因不能，则使用 jQuery 或类似工具)获取 SVG 元素的大小(如果未知)，然后 scale/translate该 g 元素基于该高度，因此它会填满屏幕。

这样，您就不需要考虑百分比了!