html - 每个屏幕的 div 大小相同

Question

在我的网站上，人们可以在板上张贴图片并四处拖动。

目前我使用的是:

width:60%;

height 40%;

他们可以保存他们的工作。

位置保存有边距，因此图像可以是 top:50px; 和 left:150px;

所以它位于 div 左边框右侧 50px 和 div 顶部下方 50px。

如果他们加载他们的工作，它必须看起来完全一样。

因此，如果图像位于右下角，则在加载文件时它必须位于右下角。

我的问题是，如果用户以不同的分辨率加载它，它会占用边距，如果下一个屏幕的屏幕分辨率更大，图像将不会位于右下角，因为有更多的空间导致 50% 1200 的小于 1900 的 50%。

所以我必须在 px 中使用 width 和 height 但是如果我在 1200 px 上设置 600px 它看起来不错但是 600px 在 1900px 上看起来不太好.

有没有办法既使用 px 又让它在每个页面上看起来都不错？

所以基本上我想使用 px 但它必须看起来相同(就像我使用 % 时一样)这样边距将相同并且页面看起来相同在大分辨率下没有大的开放空间。

在这个例子中，我在 1366 年制作了一 block 板子，并在 1024 年重新打开它，图像从左边取边距，所以它在原始板子之外。

但棋盘(黄色背景)占屏幕的百分比相同。

所以我想要一 block 占屏幕百分比相同但在每种分辨率下加载图像相同的板，因此 1025 屏幕的右下角必须是 1366 屏幕的右下角。

如果我只使用 px，网站在所有分辨率下看起来都不同，这就是我想要阻止的。

Answer 1

听起来您必须做的是 CSS 中的自适应主题或响应式设计。

@media screen and (max-width: 1024px){
  img.bg {
    left: 50%;
    margin-left: -512px; }
}

对于最大宽度为 1024px 的屏幕，设置 img 元素。您可以为要考虑的每种屏幕尺寸创建其中一些，瞧，您应该能够完全精细地控制用户看到的内容，而不管他们的屏幕尺寸是多少。