如何为基于Web的移动应用程序编写CSS？

Question

我有以下设计，我想为基于移动网络的应用程序编码。我附上了一张图片

所以我将它分为3个主要部分，页眉，页脚和内容。

.header {
  position: absolute;
  overflow: hidden;
  top: 0;
  width: 100%;
 height: 50px;
 left: 0
}

.footer {
 position: absolute;
 overflow: hidden;
 bottom: 0;
 width: 100%;
 height: 50px;
 left: 0
}

.content {
  position: absolute;
  top: 50px; bottom: 50px;
  overflow-y: auto;
  width: 100%;
  left: 0;
  padding-left:10%;
  padding-right: 10%;
}

我想确保只在必要时才能在垂直方向上滚动内容块中的内容。

我最麻烦的是将内容放在内容中，就像在图像中一样。

例如，表单元素必须在段落和底部的文本块之间垂直居中。

我为hey对象，段落对象，表单元素和文本对象创建了一个块。在图像中，包含我刚用于绘制图表的应用程序放置在那里的对象的边框，所以只是描绘内容，除了背景中的图像，可以是任何形状，但仍然在该位置。

.hey-object {
  position:relative;
  margin: 0 auto;
  height: 20%;
  text-align: justify;
  font-size: 28px;
  padding-left: 12%;
}

.paragraph {
  position:relative;
  margin: 0 auto;
  height: 50%;
  font-size: 16px;
  text-align: left;
  padding-left: 12%;
}

.input-box {
  position:relative;
  margin: 0 auto;
  height: 15%;
  text-align: justify;
  font-size: 16px;
  padding-left: 12%;
}

.text-object {
  position:relative;
  margin: 0 auto;
  height: 15%;
  text-align: center;
  font-size: 16px;
}

我处理的最大问题之一是将内容垂直放置在上述每个元素中，例如表单元素应该恰好位于段落的中间和文本对象中，文本对象应该在正上方页脚。在图像中，在hey-object和段落对象之间应该有可视化表示的空间量。

对于图像，我只是想放置它。

我一般都在寻找有关如何更好地编写我的CSS的提示，或者任何可以帮助我处理我写的问题的提示。由于这将作为应用程序的一部分进行部署，因此设备的屏幕尺寸将发生变化，因此我希望最终结果能够很好地扩展。