所有屏幕大小的HTML前端

Question

首先，我不確定這是否真的是一個「合法」的問題，因爲它不是真的關於編程，而是更多地放在前端部分。

我即將創建一個網頁，其行爲像一個全屏銀幕。創建實際的diasshow並不是一個問題，但它需要運行在所有的屏幕尺寸上，從iMac 27「以其非常高的分辨率，全高清電視屏幕一直到iPad。我的22英寸屏幕和42英寸電視的設計看起來不錯，但是當它顯示在iPad或iMac上（或者甚至是它不適合屏幕，如果顯示在27「iMac上，它只會填滿屏幕的1/4，並且在iPad上，元素太大而無法顯示。

我覺得我忽略了這裏的一些東西（？），或者僅僅是不可能創建一個適用於所有顯示器的全屏網頁設計？

任何幫助/輸入這是非常感謝！ :-)

非常感謝。

• 博

編輯：我拍了幾張截圖給你：

首先在iMac 27" ：

http://www.bo-mortensen.dk/slideshow/imac/firefox_1920x1080.png

http://www.bo-mortensen.dk/slideshow/imac/firefox_2560x1440.png

http://www.bo-mortensen.dk/slideshow/imac/safari_1920x1080.png

http://www.bo-mortensen.dk/slideshow/imac/safari_2560x1440.png

和電視機：

http://www.bo-mortensen.dk/slideshow/tv/firefox_1080i_tv.png

http://www.bo-mortensen.dk/slideshow/tv/firefox_720p_tv.png

http://www.bo-mortensen.dk/slideshow/tv/safari_1080i_tv.png

http://www.bo-mortensen.dk/slideshow/tv/safari_720p_tv.png

和鏈接到解決方案：

http://grenaabilhus.mercatus-democms.dk/

Answer 1

我會用CSS3 Media Queries，在這裏你可以設置不同的規則和設計，針對不同的屏幕尺寸，如：

@media手持式和（最小寬度： 20em）{ ⋮一個或多個規則集... }

@media所有和（最大寬度：50em）{ ⋮一個或多個規則集... }

而且我想看看this site，什麼是可能的一個很好的例子（嘗試擴展此頁面，看看會發生什麼......）

祝你好運！