Question

我有以下标记:(简化）

<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
<body>
  <div class="wrapper">
    <div class="content"> (absolutely positioned stuff) </div>
  </div>
</body>

具有以下样式：

.wrapper {
   width: 100%;
   height: 100%;
}

.content {
  width: 640px;
  height: 640px;
  margin: 0 auto;
  position: relative;
  background-color: orange;
}

在桌面（大于640像素x 640像素的屏幕）上，我的方块是顶部和中心，看起来不错。在移动人像上，我的方块是顶部并填充宽度，这也很好，完全可以接受。然而，在移动横向（屏幕小于640px的高度）上，我的方块填满整个宽度，用户需要滚动才能看到方形的底部，这是不可接受的。

我想要实现的是广场适合屏幕的高度，因此可以在横向视图中完整地看到它。我现在正在尝试一些媒体查询，看看是否有帮助。否则，实现这一目标的最佳方式是什么？

我尝试将.content更改为height: 100%，但由于其大部分内容都是绝对定位的，因此最终会有0px的高度。因此，理想情况下，正方形应该仍然是640px x 640px的大小，只是缩放以适应屏幕，所以内容可以保持。

感谢。

Answer 1

这是视口单元的理想情况。其中100vw是视口的宽度，100vh是视口的高度。

您应该能够找到有关不同单位here的更多信息。

有一点需要注意的是，使用与高度相关的视口单元可能会对Mobile Safari和Mobile Chrome产生一些奇怪的影响，因为视口高度可能会在滚动时发生变化。多年来，Chrome和Safari在移动设备上的各种行为已经发生了变化，因为他们试图找到理想的解决方案。我发现如果我需要依赖vh单位我经常使用一点javascript或css然后＆＃34; lock＆＃34;手机上那个高度的物体。

如果您在此Stack Overflow Post

中遇到此问题，可以找到该问题的其他提示

自动缩放元素以适合视口/设备方向

1 个答案: