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

问题描述

问题很简单:

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

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

这里以 CodePen 作为起点.

<div class="square">正方形

解决方案

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

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

此处示例

.body, .square {显示:弹性；对齐项目:居中；对齐内容:居中；}.身体 {最小高度:100vh；}.正方形 {宽度:100vmin；高度:100vmin；}

(为简洁起见省略了供应商前缀，请查看演示中的编译视图").em>

The problem is simple:

• The main part of my page is a square that should be shown at the center of the screen in all screen sizes and orientations
• The square should use the screen efficiently and be as big as possible without the need to scroll
• No scrollbars, no fixed sizing, no overflow-hidden, no Javascript.
• Flexbox is encouraged.

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

Here is a CodePen as a starting point.

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

解决方案

Here's my attempt to achieve the end goal.

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屋！