如何让我的网站适用于任何解决方案

Question

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

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

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

这使得＆＃34; headText＆＃34;和＆＃34; label_desc＆＃34;在我的网站的中心，但当我测试到另一台笔记本电脑时， headtext和label_desc 似乎出现在不同的地方。

另一方面，当我放大我的网站（在我的笔记本电脑上）时，内容仍会移动，并且它与大多数网站不同，当你放大时，内容变得更大并且仍然保持在适当的位置。

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

更新

感谢 hakre ，我的意思是屏幕大小，而不是分辨率。

更新2

总结我的问题 - ＆gt; http://postimg.org/image/r1hs6i3kb/

Answer 1

您正在设置左边距：

margin-left: 20%;

每个浏览器都会执行此左边距，因此不要将元素居中，而将其对齐到左边。

而是将左右边距设置为auto，将宽度（可建议）设置为小于100％以显示效果：

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


#parent {}

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

演示：http://jsfiddle.net/hRsLr/

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