Question

我需要一些反馈！如果有任何帮助，谢谢！

我是数字标牌公司的开发人员。我们在Flash中构建了一个平台（ActionScript 3），它已经运行了几年了。我们一直在谈论尝试转移到HTML5，JQUERY和PHP一段时间了。 Flash非常好用，因为它让我可以轻松地将组件排列到屏幕上。我知道闪存可能正在逐渐消失，我相信从现在开始还有一段时间，但我们希望进入未来。

好的，这是我面临的问题：
使用HTML5，我正在尝试适应不同的屏幕分辨率。当然我正在使用响应式CSS框架（materializecss），但在flash中我使用过：

stage.scaleMode = StageScaleMode.NO_BORDER;
stage.scaleMode = StageScaleMode.EXACT_FIT;

这会扩展我们的平台以适应任何屏幕尺寸 - 它将所有内容保持在一起。它只是缩放，就像一张照片一样。

在HTML5中，我觉得我无法做到这一点。你懂我的意思吗？也许我无法像在Flash中使用HTML5那样获得相同的布局？我们是否需要重新设计布局？

我想我对这篇文章的问题是，如果你看看我们当前在flash中构建的平台的屏幕截图。看看事物的布局方式。如何在HTML5中构建该布局，并让它在1280x720和Up的所有不同屏幕分辨率上保持/缩放相同的布局。 16.9布局

Answer 1

CSS为大小调整提供了很多不同的指标。相对于现有尺寸（例如身体本身的尺寸）缩放的最明显的方法是通过百分比。您的左栏宽度约为33%，您的右栏应留下以填充剩余空间。

现在，对于文字，我更喜欢用em设置字体大小。这是一个相对大小的指标。也就是说，1.2em的大小是父文本大小的120％。这很有用的原因是1em在所有设备上都设置为可读大小。作为一名Web开发人员，我不知道有关如何查看我的网站以及在哪些设备上查看的所有信息。这让我设置了一个很好的缩放点。如果您对常规宽高比和大小有所了解，可以考虑设置更明确的大小。请注意，我仍然会使用em，但在这种情况下只使用body元素。

您的下三分之一的自动收报机应相对于页面的页脚放置。定位绝对并设置bottom: 1em或类似的东西。用户的徽标应该在同一个容器中，以便它们可以放在一起。

最后，幻灯片组件应占用其容器的100％，减去填充。

基本上，您希望构建一个健壮的布局，其配置方式几乎可以适用于任何宽高比和大小。想一想真正相对于哪些项目并相应地编写CSS。

Answer 2

我使用Twitter Bootstrap进行了大量的标牌设计，并根据典型的显示尺寸（720p，1080p，UHD 4K）调整容器最大宽度。对于几乎所有内容（而不是像素或em）的响应式测量，您可以使用基于viewport-width或viewport-height的vw或vh -ratios。这些将允许您动态扩展元素。基于屏幕大小，您可以在布局中支持这两个单元：字体，div，图像等。

示例：

.yourElement {
  color: white;
  text-align: center;
  text-shadow: 0.1vh 0.1vh 0.3vh black;
  padding-top: 2.5vh;
  padding-bottom: 4vh;
}
.yourElement h1, h2 {
  font-size: 3vh;
}

在HTML5中构建数字标牌平台

2 个答案: