0

在此处输入图像描述在开发时，假设我声明了以下 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;

}

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

有什么方法可以解决这个问题？

附上截图。忽略灰色条......暂时......

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

但是在这里..它已经向左移动了。

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

4

1 回答 1

1

我没有深入阅读您的代码，但您的问题几乎可以肯定是因为以像素为单位对位置和尺寸进行硬编码。当您在较高分辨率的设备上进行设计，然后在较低分辨率的设备上进行检查时，您会发现您的布局一团糟。

如果您希望页面流畅，您可能应该在布局页面时使用百分比。

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

于 2013-03-07T19:57:15.473 回答