适用于所有屏幕尺寸的 HTML 前端
首先，我不确定这是否真的是一个在 StackOverflow 上提出的“合法”问题，因为它实际上与编程无关，而更多地与前端部分有关。
我即将创建一个网页，其作用类似于全屏显示。创建实际的 diasshow 根本不是问题，但它需要在所有屏幕尺寸上运行，从分辨率非常高的 iMac 27 英寸到全高清电视屏幕等等到目前为止，
我所做的就是用百分比来设置每个元素的样式，该设计在我自己的 22 英寸屏幕和 42 英寸电视上看起来不错，但是当它在 iPad 或 iPad 上显示时。 iMac（甚至不同尺寸的电视），它不适合屏幕，如果它在 27 英寸 iMac 上显示，它只会填满屏幕的 1/4，而在 iPad 上，元素太大而无法显示。
我觉得我在这里忽略了一些东西（？），或者创建一个适用于所有显示器的全屏网页设计是不可能的吗？
对此的任何帮助/意见将不胜感激！ :-)
提前非常感谢。
- Bo
编辑：我为您拍了一些屏幕截图：
首先是 iMac 27":
http: //www.bo-mortensen.dk/slideshow/imac/firefox_1920x1080.png
http://www.bo-mortensen.dk/slideshow/imac/firefox_2560x1440.png
<一个href="http://www.bo-mortensen.dk/slideshow/imac/safari_1920x1080.png" rel="nofollow">http://www.bo-mortensen.dk/slideshow/imac/safari_1920x1080.png
<一个href="http://www.bo-mortensen.dk/slideshow/imac/safari_2560x1440.png" rel="nofollow">http://www.bo-mortensen.dk/slideshow/imac/safari_2560x1440.png
还有电视：
http://www.bo-mortensen.dk/slideshow/tv/firefox_1080i_tv.png
<一个href="http://www.bo-mortensen.dk/slideshow/tv/firefox_720p_tv.png" rel="nofollow">http://www.bo-mortensen.dk/slideshow/tv/firefox_720p_tv.png
<一个href="http://www.bo-mortensen.dk/slideshow/tv/safari_1080i_tv.png" rel="nofollow">http://www.bo-mortensen.dk/slideshow/tv/safari_1080i_tv.png
<一个href="http://www.bo-mortensen.dk/slideshow/tv/safari_720p_tv.png" rel="nofollow">http://www.bo-mortensen.dk/slideshow/tv/safari_720p_tv.png
以及解决方案的链接：
First off, I'm not sure if this is actually a "legal" question to ask here on StackOverflow since it is not really about programming, but more on the frontend-part.
I'm about to create a webpage which acts like a diasshow in fullscreen. Creating the actual diasshow isn't a problem at all, but it needs to run on all screensizes, all the way from an iMac 27" with it's very high resolutions, full HD tv screens and all the way down to an iPad.
What I have done so far is to style every single element with percents. The design looks good on my own 22" screen and on my 42" tv, but when it's shown on i.e. an iPad or iMac (or even a difference size tv), it doesn't fit the screen. If it's shown on the 27" iMac it only fills up the 1/4 of the screen and on iPad, the elements are too large to display.
I feel like I have overlooked something here (?) or is it just plain-out impossible to create a fullscreen webdesign that works on all monitors?
Any help/input on this is greatly appreciated! :-)
Thanks a lot in advance.
- Bo
EDIT: I took a few screenshots for you:
First the 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
And the TV:
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
And the link to the solution:
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我会使用 CSS3 媒体查询，您可以在其中针对不同的屏幕设置不同的规则和设计尺寸如：
@media手持设备和（最小宽度：20em）{
⋮ 一个或多个规则集...
}
@media all 和 (最大宽度:50em) {
⋮ 一个或多个规则集...
并且
我会查看 这个网站 ，这是一个很好的例子（尝试缩放此页面， 看看会发生什么......）
祝你好运！
I would use CSS3 Media Queries, where you can set different rules and designs, for different screen sizes like:
@media handheld and (min-width:20em) {
⋮ one or more rule sets…
}
@media all and (max-width:50em) {
⋮ one or more rule sets…
}
And I would check out this site , a great example of what is possible (try to scale this page, and see what happens...)
Good luck!