响应式设计：在任何屏幕尺寸中集中全屏方块

Question

问题很简单：

• 我页面的主要部分是一个正方形，应以所有屏幕尺寸和方向显示在屏幕中央
• 广场应该有效地使用屏幕并且尽可能大而不需要滚动
• 没有滚动条，没有固定大小，没有溢出隐藏，没有Javascript。
• 鼓励Flexbox。

这是页面在横向或纵向浏览器中的外观：

这是一个CodePen作为起点。

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

Answer 1

这是我实现最终目标的尝试。

关键点是对方框的width和height属性使用vmin viewport percentage length：

<强> Example Here

.body, .square {
  display: flex;
  align-items: center;
  justify-content: center;
}

.body {
  min-height: 100vh;
}

.square {
  width: 100vmin;
  height: 100vmin;
}

（为简洁省略了供应商前缀，请查看demo中的“已编译视图”）。