响应式设计在不同尺寸的屏幕上显示不同

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.

的屏幕尺寸

所以有人可以告诉我这里有什么不对。任何帮助和建议都会非常值得赞赏。

Answer 1

你可以在div上登录负面 - 登录

Answer 2

我测试了您发布的代码，它在所有桌面浏览器中运行良好，甚至IE

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

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

更改＆lt; div class =“contact-number”＆gt; 123-456-7890＆lt; / div ＆gt;至＆lt; span class =“contact-number”＆gt; 123-456-7890＆lt; / span ＆gt;

Answer 3

我已经完成了它在不同大小的设备上正常工作的代码，它的问题与负面和其他继承类上给出的一些边缘属性有关。