响应式设计:将任何尺寸的全屏正方形集中 [英] Responsive design: centralize a full-screen square in any screen size

问题描述

问题很简单:

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

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

This is how the page should look like in a landscape or portrait browser:

这里是 CodePen 的起点.

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

推荐答案

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

Here's my attempt to achieve the end goal.

关键点是使用 vmin 视口百分比长度表示方形框的 width 和 height 属性:

The key point is to use vmin viewport percentage length for both width and height properties of the square box:

此处的示例

Example Here

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

.body {
  min-height: 100vh;
}

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

(为简便起见，省略了供应商前缀，请在演示中检查编译视图").

(vendor prefixes omitted for brevity, check the "Compiled View" in the demo).

这篇关于响应式设计:将任何尺寸的全屏正方形集中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！