自适应设计在不同尺寸的屏幕上显示出不同

Question

我正在做一个响应式设计的WordPress站点。 现在我的标记就是这样

<div class="contact-wrap">
  <div class="contact-number">123-456-7890</div><!--.contact-number-->
  <div class="user-login"><a href="#"><span class="login-icon">Login</span></a></div><!--.user-login-->
</div>

和CSS是这样的

.contact-wrap {
  padding: 0;
  margin: 25px 0 0 0;
  overflow: hidden;
}
.contact-wrap .contact-number {
  background-image: url('images/contact-icon.png');
  background-position: 0 7px;
  background-repeat: no-repeat;
  color: #d4001a;
  font-size: 22px;
  font-weight: bold;
  padding: 0 0 0 24px;
  float: left;
}
.contact-wrap .user-login {
  padding: 4px 0 0 0;
  float: right;
}
.user-login a {
  background-image: url('images/login-bg-sprited.png');
  background-position: 0 -27px;
  background-repeat: no-repeat;
  padding: ;
  width: 62px;
  height: 27px;
  display:inline-block;
  padding: 0 0 0 4px;
}

现在，由于该站点将处于响应状态，因此它看起来具有960像素以及更大的屏幕，但是当我调整屏幕大小时，联系电话的背景图像效果不好。 这是更大屏幕的屏幕截图。

这是320X480.的屏幕尺寸320X480.

所以有人可以告诉我这是怎么回事。 任何帮助和建议将是非常可贵的。

Answer 1

您可以在div上做一个负的margin-top-登录

Answer 2

我测试了您发布的代码，它在所有桌面浏览器（甚至是IE）中都能正常运行

您的问题出在您发布的代码周围，可能是某些继承的样式。 您可以尝试以下几种方法：

将选择器.contact-wrap.contact-number更改为简单的.contact-number

将< div class =“ contact-number”> 123-456-7890 </ div >更改为< span class =“ contact-number”> 123-456-7890 </ span >

Answer 3

我遍历了代码，它在不同大小的设备上都可以正常工作，它的问题与否定值和其他继承的类提供的某些margin属性有关。