Html 响应性设计在不同尺寸的屏幕上显示出不同的效果

我正在做一个响应性设计的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>

.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的屏幕大小。

---

有人能告诉我这里出了什么问题吗。任何帮助和建议都是非常值得欣赏的。

你可以在div-login上做一个负页边空白顶部

我测试了你发布的代码，它在所有桌面浏览器中都运行良好，即使是IE

你的问题在你发布的代码的某个地方，可能是某种继承的风格。 您可以尝试以下几种方法：

将选择器.contact wrap.contact number更改为simply.contact number

---

将123-456-7890更改为123-456-7890

我已经查看了代码，它在不同大小的设备上运行良好。它的问题可能与负片上的某些边距属性以及其他继承类有关。

好，您可能应该将大多数px值转换为百分比。是的，这只是基本的css代码：如果屏幕大小大于或小于像素量，您可以使用css媒体查询更改css。这是一个很好的教程：