Question

这是我在我的页面上的按钮的代码，我的桌面上的按钮几乎是我想要的按钮，但是当我上笔记本电脑时，按钮会进一步向下移动，这取决于电脑分辨率.. 我的背景图像设置为适合屏幕，无论它们具有分辨率的大小，或者它们如何调整浏览器大小以防止它扭曲图片但我似乎无法让按钮显示在同一屏幕上所有分辨率的点。或者如果有一种方法让按钮与背景图像一起移动它的位置，那就是我正在寻找的东西，我也试过％但是这里是下面的代码

a.button {
  position:absolute;
  display:block;
}

a.button.testing-link {
  width:250px;
  height:87px;
  background:url(http:);
  top:753px;
  left:750px;
}

a.button.testing2-link {
  width:250px;
  height:87px;
  background:url(http:);
  top:753px;
  left:180px;
}

a.button.testing3-link {
  width:250px;
  height:89px;
  background:url(http:);
  top:753px;
  left:465px;
}

Answer 1

这是因为你需要让你的css响应。这是一张备忘单。 http://webdesignerwall.com/tutorials/css3-media-queries

但基本上你会有这样的事情：

@media screen and (max-width: 600px) {
  a.button {
    //your rules for that
  }
}

@media screen (min-width: 600px) and (max-width: 800px) {
  a.button {
    //your rules for that
  }
}

等等。

用英语回答：您桌面的分辨率与您查看的笔记本电脑的分辨率不同，因此您为其设置的规则仍然适用于笔记本电脑，由于分辨率的原因，它看起来不同。

另外，我作为新手网络开发人员遇到的一个错误是定位你的方式，我建议不要这样定位，查看谷歌良好定位方法的例子，也许使用百分比代替静态值，以像素为单位。 / p>

Answer 2

这就是我想出的......让我知道你的想法？

a.button {
  position:absolute;
  display:block;
  margin-left:auto;
  margin-right:auto;
}

@media screen and (min-width: 1500px) and (max-width: 2500px) {
  a.button.testing-link {
    width:250px;
    height:87px;
    background:url();
    top:753px;
    left:750px;
  }
}

@media screen and (min-width: 600px) and (max-width: 1499px) {
  a.button.testing-link {
    width:250px;
    height:87px;
    background:url();
    top:0px;
    left:0px;
  }
}

@media screen and (min-width: 1500px) and (max-width: 2500px) {
  a.button.testing2-link {
    width:250px;
    height:87px;
    background:url();
    top:753px;
    left:50px;
  }
}

@media screen and (min-width: 600px) and (max-width: 1499px) {
  a.button.testing2-link {
    width:250px;
    height:87px;
    background:url();
    top:0px;
    left:0px;
  }
}

@media screen and (min-width: 1500px) and (max-width: 2500px) {
  a.button.testing3-link {
    width:250px;
    height:87px;
    background:url();
    top:753px;
    left:340px;
  }
}

@media screen and (min-width: 600px) and (max-width: 1499px) {
  a.button.testing3-link {
    width:250px;
    height:87px;
    background:url();
    top:0px;
    left:0px;
  }
}

用于不同计算机分辨率的css定位按钮

2 个答案: