html - 如何创建 SCALABLE HTML5 横幅？这将填满 100% 的屏幕。

Question

我们需要创建 HTML5 横幅，它不会有固定大小，但可以缩放并按宽度和高度适应 100% 的屏幕。横幅相当简单，但在 320x480 和 1024x768 上应该看起来不错。

可能吗？

Answer 1

如果使用 SVG 图像是可以接受的，我会创建一个在两个极端情况下看起来都不错的图像（确保它在低分辨率下仍然可读），然后<div class="span12">使用响应式布局将其放入元素中，例如Twitter Bootstrap。当用户更改屏幕大小时，您的横幅将很好地缩放。

如果您不能使用 SVG，则使用 JPEG 或 PNG，以最高分辨率设计横幅，并确保在使用您想要支持的最低分辨率时它仍然可读。

If you want to be really fancy, you could skip the image altogether and design your banner as a bunch of HTML5 code, with CSS and possibly JavaScript code that would display different content depending on the size of the screen, but that could be quite a bit of work and it might not be worth the effort.

Answer 2

您可以制作具有 100% 全屏宽度的全屏横幅部分：宽度为 100%：高度：100%；，这里有提示和实时链接

#bannersection {
position: relative;
display: table;
width: 100%;
background: rgba(99,214,250,1);
height: 100vh;
}

https://www.htmllion.com/fullscreen-header-banner-section.html