Html 我怎样才能使我的网站在任何分辨率下工作

我最近为我们学校创建了一个网站，非常棒。然而，当我在另一台笔记本电脑上测试时，我网站的内容乱七八糟，好像它们不在正确的位置。我的代码的一些示例：

#headText {
color: #1f8e1c;
position: absolute;
margin-left: 20%;
margin-top: 1%;
}

#label_desc {
color: #1f8e1c;
position: absolute;
margin-left: 20%;
margin-top: 1%;
}

这使得“headText”和“label_desc”位于我的站点中心，但当我在另一台笔记本电脑上测试时，headText和label_desc似乎出现在不同的位置

另一方面，当我放大我的网站（在我的笔记本电脑上）时，内容仍然在移动，而且它本身也混乱了。与大多数网站不同，当你放大时，内容变得更大，并且仍然停留在它们适当的位置

你能帮帮我吗？我真的非常需要它

更新 多亏了哈克雷，我指的是屏幕大小，而不是分辨率

更新2

---

总结一下我的问题->

您正在设置左边距：

margin-left: 20%;

每个浏览器都会执行此左边距操作，因此不会使元素居中，而是将其向左对齐

相反，将左右边距设置为

auto

，宽度（suggestable）小于100%以显示效果：

<div id="parent">
  <div id="child">
    center-me :)
  </div>
</div>


#parent {}

#child {
    width: 40%;
    margin: 1% auto 0;
}

我的中心：）
#父{}
#孩子{
宽度：40%；
保证金：1%自动0；
}

演示：

---

这与决议无关。分辨率是指每平方厘米有多少像素。为什么你最可能的意思是屏幕大小，这是相关的，但不同。更准确地说，您指的是浏览器视图端口中可用的大小，即网站呈现到的区域。

您的网站是否与多个浏览器（firefox、chrome、opera等）配合使用？您使用的框架是什么？居中工作在父元素中，使用

文本对齐：居中

，然后使子元素具有宽度，更重要的是将左右边距设置为

自动

，以便浏览器可以实际将其居中。我认为不同的系统不是这样的，而是不同的浏览器。您必须剖析和处理个别的不兼容性。@BasileStrynkevitch是的，它适用于任何浏览器。。我认为这是因为每个笔记本电脑/电脑都有不同的解决方案。@dkreives：你可能还没有那么流利地使用CSS。我给你添加了一个答案，还有一本好书，你可以从中获取你需要的：@Ascherer:：）-修复。谢谢你，伙计，这很有帮助。我只是在谷歌上搜索了所有东西，仍然没有找到答案，但得到了一个线索，叫做“最大宽度/最小宽度”。。。虽然我试过了，但结果很糟糕。我看了几个例子，它们都起作用了——无论你放大还是缩小，它们的（例子）按钮都保持不变，就像facebook.com等。。我的问题是当我放大或缩小时，按钮会一直停留在显示屏内，并使自己处于混乱状态：（@dkreges：当我做这样的设计时，我通常会创建包含所有元素的示例静态HTML文件，并在其中包含CSS。然后我用不同的浏览器大小测试它，并缩放它的行为。最好是一步一步地完成，我还将其置于版本控制下，以便更好地调试它。完成后，我可以在ap中重复使用HTML和CSS应用程序。感谢您的建议。下面是一个图片中的问题，以便于理解：）