Question

我正在开发Ionic App，它需要在设备屏幕的左下角有一些按钮（一个在另一个之上，而不是嵌入式的）

我有以下CSS：

.button {
   left = "1em";
   z-index = "13";
   overflow = "scroll";
   position = "absolute";
   width = "3em";
   height = "2.5em";
   textAlign = "center";
}

然后我这样计算其底部：

let bottom: number = 0;

this.floors.forEach(floor => {
   let floorButton: HTMLElement = document.createElement("button");

   floorButton.setAttribute("class", "button");
   floorButton.appendChild(document.createTextNode(floor.level));
   floorButton.style.bottom = bottom + "em";
   bottom = bottom + 5;
});

现在我的问题很简单：在屏幕比其他设备大的设备中，它位于较高位置。

我可以通过计算设备屏幕的高度并将其除以x直到达到所需位置来解决这个问题。但这对我来说似乎很肮脏（我不知道这是否是正确的选择，也许是）。

所以我的问题是，有没有一种简单的方法可以像我上面所说的那样执行此操作，而不必以像素为单位计算屏幕的高度大小？ CSS可以直接完成吗？我已经检查了@media，但看起来根本没有帮助。或者也许我只是做对了，而我对此却考虑太多了？

谢谢！

Answer 1

您可以为此使用CSS：

.button {
   display: block;
   margin-top: 5px;
}

这种方式与屏幕的宽度无关紧要，您的按钮始终位于单独的行中。

CSS-尽管设备的屏幕尺寸大，

1 个答案: