每个屏幕都有相同的大小

Question

在我的网站上，人们可以在电路板上发布图像并拖动它们。

目前我使用以下内容：

width:60%;

height 40%;

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

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

所以它在div的左边框右边50px，从div顶部向下50px。

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

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

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

所以我必须在px中使用width和height，但如果我在1200像素上设置600px它看起来不错，但1900px上600px看起来不会很好。

有没有办法使用px但在每个页面上看起来都很好？

所以基本上我想使用px，但它必须看起来一样（比如当我使用％时），因此边距将是相同的，并且页面看起来相同，在大分辨率上没有大的开放空间。

在示例中，我在1366年制作了一块电路板，并在1024处重新打开，图像从左边开始，因此它不在原来的电路板上。

但是电路板（黄色背景）与屏幕的百分比相同。

所以我想要一个与屏幕相同百分比的电路板，但在每个分辨率上加载图像相同，所以1025屏幕的右下角必须是1366屏幕的右下角。

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

Answer 1

你需要做的是在CSS中自适应主题或响应式设计。

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

对于最大宽度为1024px的屏幕，请设置img元素。 您可以为要考虑的每个屏幕尺寸创建一些这些屏幕尺寸，您应该能够对用户看到的内容进行完全细粒度的控制，无论屏幕尺寸如何。