Responsive design: centralize a full-screen square in any screen size

柔情痞子 提交于 2021-02-04 17:48:40

问题


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:

The square should be at the center in all conditions

Here is a CodePen as a starting point.

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

回答1:


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).



来源:https://stackoverflow.com/questions/25842024/responsive-design-centralize-a-full-screen-square-in-any-screen-size

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!