如何调整 div 元素，使网站在不同屏幕尺寸的设备上看起来相同？

Question

我有一个网站，我定期将框（称为便利贴的 div 元素）添加到宽度为 100% 的较大 div 元素（称为部分）。部分元素是除网站标题之外的整个网站。我对盒子使用了绝对定位，并根据顶部和左侧像素设置了它们在网站上的位置。.section{    width: 100%;    height: 1000px;    margin: 0 auto;    background-repeat: repeat-y;    background-size:contain;    background-color: #8B8B8B;}.post-it{    height: 100px;    width: 100px;    font-family: 'Monte', sans-serif;    font-size: 25;    padding-top: 56.25%;}<header>    <p>Sample header of webpage</p></header><div class="section">    <div class = "post-it" style = "position: absolute; top: 640px; left: 20px;">    .    .    .    <div class = "post-it" style = "position: absolute; top: 1450px; left: 870px;">    .    (arbitrary amount of post-its added at different times)</div><footer>    <p>Sample footer of webpage</p></footer>当我在笔记本电脑上时，我可以在较大的 div 元素的最右侧部分添加一个框，并且网站显示不会受到干扰。但是，当我在屏幕较小的手机上刷新同一页面时，整个网站会缩小到浏览器窗口的左上角，并且便利贴在白色背景上闲置，这不是我编码的一部分。另外，当我调整桌面上的浏览器窗口时，一些便利贴被裁剪掉。作为参考，我没有使用网站上的表格进行布局。如何调整 div 元素，使网站在不同屏幕尺寸的设备上看起来相同？

Answer 1

更新- 硬编码位置

.section应该position设置relative为absolute指定定位的子元素锚定到它。然后，您可以尝试使用百分比来确保子元素的位置保持.section在不同的视口内。

但是，仅使用内联样式和绝对位置时，无法确保absolute定位元素保持预期位置而不与不同大小的视口上的其他元素重叠。

如果必须使用绝对定位，则需要为.post-it硬编码到 HTML 中的每个创建 id。然后，在您的 中styles.css，指定不同视口大小的媒体查询。

我在这里演示了媒体查询和绝对位置：https ://codepen.io/sevanbadal/pen/ExjBKEg

这是非常乏味的，因为您必须id为每个硬编码 new .post-it。然后在 CSS 中将 id 添加到您指定的每个媒体查询中。

原始响应- 使用弹性布局

您可以使用 CSS Flexbox 布局。有关详细信息，请查看 Mozilla CSS Flexbox 文档。

对于您的问题，请将 flex 应用于您的“section”类。然后使用 justify-content 调整任意数量的 div 在 Flex 布局中的显示方式。Flex-wrap 还可以用于将 Flex-layout 的内容分成多行。

您可能想要删除/更改 .post-it 中的填充。

在 .section 上尝试以下代码：

.section{

  width: 100%;

  height: 1000px;

  background-repeat: repeat-y;

  background-size:contain;

  background-color: #8B8B8B;

  display: flex;

  flex-wrap: wrap;

}

这是 .post-it

.post-it{

  height: 100px;

  width: 100px;

  font-family: 'Monte', sans-serif;

  font-size: 25;

}