适用于所有屏幕大小的HTML前端

Question

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

我即将创建一个网页，它的作用就像一个全屏的对话框。创建真正的diasshow一点问题都没有，但它需要在所有屏幕上运行，从iMac 27“到非常高的分辨率，全高清电视屏幕，一直到iPad。

到目前为止，我所做的就是用百分数来修饰每一个元素。这个设计在我自己的22英寸屏幕上和我的42英寸电视上看起来不错，但当它在iPad或iMac (甚至是不同尺寸的电视机)上显示时，它就不适合屏幕了。如果它显示在27英寸的iMac上--它只填充了屏幕的1/4和iPad上的1/4，那么元素太大，无法显示。

我觉得我好像忽略了一些东西(?)还是完全不可能在所有显示器上创建一个全屏幕的网页设计？

如对此有任何帮助/输入，将不胜感激！：)

提前谢谢。

• Bo

编辑:我给你拍了几张截图：

首先是iMac 27"：

1920x1080.png

2560x1440.png

1920x1080.png

2560x1440.png

还有电视：

tv.png

tv.png

tv.png

tv.png

与解决方案的联系：

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

Answer 1

我将使用CSS3媒体查询，您可以为不同的屏幕大小设置不同的规则和设计，如：

@media手持和(最小宽度:20…){⋮一个或多个规则集…}

@media all和(最大宽度:50…){⋮一个或多个规则集…}

我想看看本站，一个很好的例子，说明什么是可能的(试着缩放这个页面，看看会发生什么.)

祝好运!