响应式网页 - 高度设计

时间:2014-06-06 03:55:35

标签: javascript html css responsive-design raphael

如果这个问题更像是在寻找意见或讨论,我会提前道歉。

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

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

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

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

1 个答案:

答案 0 :(得分:1)

如果您使用的是操纵SVG的库(Raphael所做的那样),您不一定要使用百分比。相反,您可以将SVG“canvas”元素的大小设置为您想要的任何大小。

为了让你的游戏占据100%的空间,你可以将所有图形放入g element,使用Raphael(或jQuery或者jQuery)获取SVG元素的大小(如果不知道)类似的,如果拉斐尔出于某种原因不能),那么scale/translate那个g元素基于那个高度,所以它填满了屏幕。

这样,你不需要考虑百分比!