所有屏幕大小的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，什么是可能的一个很好的例子（尝试扩展此页面，看看会发生什么......）

祝你好运！