如何调整 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;}