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

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

我将要创建一个网页，它像全屏显示一样运行。创建实际的 diasshow 根本不是问题，但它需要在所有屏幕尺寸上运行，从 27"的 iMac 一直到它的高分辨率、全高清电视屏幕等等到 iPad。

到目前为止，我所做的是用百分比设置每个元素的样式。该设计在我自己的 22"屏幕和 42"电视上看起来不错，但当它显示在 iPad 或 iMac(甚至不同尺寸的电视)上时，它不适合屏幕。如果它在 27"iMac 上显示，它只占满屏幕的 1/4，而在 iPad 上，元素太大而无法显示。

我觉得我在这里忽略了一些东西(？)，或者创建一个适用于所有显示器的全屏网页设计显然是不可能的？

非常感谢对此的任何帮助/意见! :-)

非常感谢。

编辑:我为您截取了一些屏幕截图:

首先是 iMac 27":

还有电视:

以及解决方案的链接:

最佳答案

我会使用 CSS3 Media Queries ，您可以在其中针对不同的屏幕尺寸设置不同的规则和设计，例如:

@media handheld and (min-width:20em) { ⋮ 一个或多个规则集……

@media all and (max-width:50em) { ⋮ 一个或多个规则集……

我会查看 this site ，这是一个很好的例子(尝试缩放此页面，看看会发生什么......)

祝你好运!

关于jquery - 适用于所有屏幕尺寸的 HTML 前端，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7813277/