如何编写一个始终位于屏幕中央并触及较短边缘的正方形？

Question

任务是绘制一个始终位于屏幕中央的正方形，并且左，右或顶部或底部边缘始终位于屏幕的边缘。如果我们知道屏幕方向，就很容易。

如果是纵向：（我设置了“屏幕”，实际上正方形的高度和宽度都是100vw）

.screen{
  width: 200px;
  height: 400px;
  border: 1px solid black;
  display: flex;
}
.square{
  background-color: red;
  width: 200px;
  height: 200px;
  margin: auto;
}

<div class="screen">
  <div class="square"></div>
</div>

如果是风景：

.screen{
  width: 100vw;
  height: 100vh;
  border: 1px solid black;
  display: flex;
}
.square{
  background-color: red;
  width: 100vh;
  height: 100vh;
  margin: auto;
}

<div class="screen">
  <div class="square"></div>
</div>

但是我们不知道屏幕方向，也不能使用JavaScript。您是否有解决问题的唯一CSS想法？

Answer 1

您需要为此使用max-width和max-height。
这样，无论是横向屏幕还是纵向屏幕，正方形都将始终适合屏幕。

.square {
  width: 100vw;
  height: 100vw;
  max-width: 100vh;
  max-height: 100vh;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: red;
}

body {
  margin: 0;
}

<div class="square"></div>

Answer 2

您可以通过媒体查询了解屏幕方向

@media (orientation: landscape) {
  /////
}

@media (orientation: portrait) {
  //////
}