如何正确定位图像，让我的html / css适合每个分辨率？

Question

所以我在整个事情上都是新手，而且我被指派在学校创建一个产品推广项目。我在家里工作，所以当我把它上传到有大显示器的学校时，我很沮丧地看到所有的东西都是如此不同。 [我打算如何将网站看作How I coded in HTML[][1]] 1 How I coded in CSS

任何人都可以帮我解决这个问题吗？

Answer 1

如果您想让它具有响应性，则不能使用这样的绝对定位。 想一想，如果你绝对用px定位某些东西，无论你的显示器如何，它都会留在那里。

我创建这张图片作为一个视觉示例：

如您所见，红色方块是绝对定位的元素。让我们说它有这个类：

.square {
  background-color: red;
  height: 100px;
  width: 100px;

  position: absolute;
  top: 400px;
  right: 1255px;
}

Absolute lengths example as a codepen

如上图所示，它将在平板电脑的视口中呈现，但不会在手机上呈现。

为什么会这样？

因为从逻辑上讲，平板电脑上显示的数据比手机显示的数据更多..这不可能更简单。

我们如何使其响应？（在不同的设备上显示相同的内容）

我们必须使用相对于其视口的测量而不是像素。 AKA Relative Lengths。

让我们解决上述问题

.square {
  background-color: red;
  height: 100px;
  width: 100px;

  position: absolute;
  top: 400px;
  right: 66%;
}

relative lengths example as a codepen 是的..那或多或少吧。您可以通过缩小浏览器窗口来比较两个代码，并看到魔术。