2014-06-06 135 views
0

如果這個問題聽起來更像是尋找意見或討論,我很抱歉。響應式網頁 - 高度設計

我正在設計一個使用Raphael庫而不是Canvas的遊戲類型頁面。我的第一個設計決策是使用百分比來表示所有事物,以便它可以利用全部或大部分可用的屏幕,而不管使用何種分辨率(現在,我知道這可能幾乎無法實現)。

當我閱讀有關響應式設計時,我總是聽到關於寬度的設計,因爲內容可以上下瀏覽,所以這很有意義。但是,設計時考慮到身高的高低呢?如果我希望在這個遊戲中所需的所有信息都可以在沒有垂直滾動的情況下訪問?

這裏的標準做法是什麼?它是具有預定義元素尺寸併爲最流行的分辨率設計的媒體查詢路線嗎?或者,是否真的有可能創建一個大小爲百分比的複雜系統?

男人,這聽起來很有意見,但我希望有一個指南或文章討論這個話題,我已經錯過了。

+0

您可以隨時使用JS來獲取用戶窗口的高度,並在將溢出設置爲隱藏時適當地調整容器的大小。 – Charles

回答

1

如果您使用操作SVG的庫(它看起來像Raphael所做的那樣),則不必使用百分比。相反,您可以將SVG「canvas」元素的大小設置爲任意大小。

爲了讓你的遊戲佔滿該空間的100%,你可以將所有圖形放入g element,使用Raphael獲得SVG元素的大小(如果它是未知的),或者如果Raphael不能因爲某種原因),然後scale/translate g元素基於那個高度,所以它填滿了屏幕。

這樣,你不需要用百分比來思考!

+0

當然,該死的。爲什麼我沒有想到這個? :p通過這個與我一起走過......我得到一個基本的佈局 - 比方說,800x600(不支持移動設備)。然後,我可以得到包含論文的div的高度(Raphael對canvas的實現)。爲了保持縱橫比的正確性,我發現高度與600px相比變化了多少,並將其應用於寬度?據我所知,Raphael沒有適合任何東西的功能。 – Dinklebeeeerg

+0

是的,這聽起來是正確的,除非你使用svg,你可以在'transform'屬性中使用'scale'。您只需找到正確的比例因子,即可將800x600接頭裝入您實際使用的任何尺寸的盒子中。如果您的容器實際上是400x400,那麼您將不得不按0.5來縮放,從而得到400x300(頂部和底部未使用50個像素)。 – JustcallmeDrago