在不同系统上使我的网页具有相同外观的方法是什么答案

【问题标题】：What is the way to have the same look of my webpage on different systems在不同系统上使我的网页具有相同外观的方法是什么
【发布时间】：2014-02-11 09:21:10
【问题描述】：

我正在开发一个网页，为此我放置了两个按钮，使它们的位置相对并使用

position : relative
top : 100px;
left:400px;
width:200px;

现在，它在我的系统上看起来不错，但我很确定在具有不同尺寸的系统上，外观会搞砸。此外，分辨率会改变按钮的位置。

让它在所有设备上运行的最佳方法是什么。我不能做类似的事情，而不是提及我希望它移动的确切像素，也许放一个百分比或其他东西。我不知道该怎么做。

谢谢

【问题讨论】：

要让他们始终居中，请使用width:200px;margin:0 auto。另请阅读有关响应式网页设计的更多信息。
可能会放一个百分比或其他东西。我不知道该怎么做。只做10%而不是100px？

标签： html css pixel appearance

【解决方案1】：

Working demo

HTML：

CSS：

#parent {
  text-align: center;
  width: 600px;
  background: grey;
}
.child {
  display: inline-block;
  width: 120px;
  height: 100px;
  margin-top: 30px;
}
.child:first-child {
  background: teal;
}
.child:last-child {
  background: steelblue;
}

【讨论】：

位置默认为static。