css在不同的分辨率上搞砸了

Question

开发时，假设我声明了以下css属性

.buttons-pos {
    /*margin: 0px 20px;*/
    padding: 10px;
    display:inline-block;
    overflow:hidden;
    height:20px;
    position: relative;
    right:-550px;
    background-color: #E6E6E6;
    position: relative;
    text-align: justify;
    border: 1px solid;
    border-color: #E6E6E6;
    border-radius: 3px;

}

两个蓝色按钮的CSS：

  .checksheet {
    /*margin: 0px 20px;*/
    left: 400px;
    top: 45px;
    position: relative;

}
  .nchecksheet {
    /*margin: 0px 20px;*/
    left: 680px;
    top:2px;
    position: relative;

}

这在我的电脑中看起来非常好但是当我在其他电脑上查看时...位置都搞砸了？

解决此问题的方法是什么？

附加屏幕截图。 忽略灰色条...现在......

你看到的蓝色按钮.. 那是我笔记本电脑屏幕的中心..

但是在这里......它已经转移到了左边。

如果我在笔记本电脑中看到这个...... 蓝色按钮将位于我的屏幕中央 但是灰色条会向右移动..

Answer 1

我没有仔细阅读您的代码，但您的问题几乎可以肯定是因为硬编码位置和尺寸（以像素为单位）。当您在更高分辨率的设备上进行设计并稍后检查较低分辨率的设备时，您会发现您的布局混乱了。

如果您想让页面流畅，您应该使用percentages来布局页面。

另一种可能更适合您需求的解决方案是设计最低标准。在这种情况下，这实质上意味着您决定页面显示的最低分辨率是什么，然后针对该分辨率进行设计，使页面居中以寻找其他分辨率。