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

标签 javascript html css responsive-design raphael

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

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

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

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

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

最佳答案

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

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

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

关于javascript - 响应式网页——高度设计,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24073917/

相关文章:

javascript - jQuery .delay 与 .fadeOut 结合不做任何事情

html - 第 N 个 child 从其他 child 继承变换和过渡

javascript - _.debounce 检查去抖是否挂起

javascript - 如何获取声明新对象的变量的名称

javascript - 复制包含特定字符串的每个 HTML 属性

css - Vue 2 + 网页包 : Accessing Assets Folder

html - <custom> 没有功能的 html 标签?

javascript - iPad 上奇怪的网站行为

javascript - 无法理解二叉树 DFS 的递归部分

python - 从 Python 中的字符串中去除 HTML