适用于所有屏幕尺寸的HTML前端

Question

首先，我不确定这是否实际上是一个在StackOverflow上提出的“合法”问题，因为它不是关于编程，而是更多关于前端部分。

我即将创建一个在全屏幕中像diasshow一样的网页。创建实际的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掌上电脑和（min-width：20em）{   ⋮一个或多个规则集...... }

@media all和（max-width：50em）{   ⋮一个或多个规则集...... }

我会查看this site，这是可能的一个很好的例子（尝试扩展此页面，看看会发生什么......）

祝你好运！