html - 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如果您希望页面流畅，请在布局页面时使用。

另一种可能更适合您需求的解决方案是针对最小公分母进行设计。这实质上意味着，在这种情况下，您决定页面显示的最低分辨率是多少，然后针对该分辨率进行设计，将页面居中用于其他分辨率。