响应式设计：在任何屏幕尺寸中集中一个全屏正方形

Posted 2023-03-05

【中文标题】响应式设计：在任何屏幕尺寸中集中一个全屏正方形

【英文标题】：Responsive design: centralize a full-screen square in any screen size

【发布时间】：2014-11-08 14:58:50

【问题描述】：

问题很简单：

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

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

这里以CodePen 为起点。

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

【问题讨论】：

相关：Maintain aspect ratio of div but fill screen width and height in CSS?

【参考方案1】：

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

关键点是vmin viewport percentage length同时用于方框的width和height属性：

Example Here

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


.body 
  min-height: 100vh;


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

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

【讨论】：

对于那些对CSS Flexbox Layout不感兴趣的人，这里是an alternative，它应该也适用于IE9。