CSS显示响应的Nag Bar？

Question

我们正在使用名为“Covert PinPress”的WordPress主题，它基本上是Pinterest的淘汰赛。

以下是一个示例页面：

http://shoeporn.com/iron-fist-death-dance/

顶部的 #header_banner 黄色横幅可以在笔记本电脑/台式机上查看，但不能在移动设备上查看。

很清楚为什么，因为在主题的style.css中，它有：

@media only screen and (min-width: 480px) and (max-width: 768px) {
#header_banner { display:  none; }
}

和

@media only screen and (max-width: 480px) {
#header_banner, #header #search {display:  none;}   
}

如果我要删除这些条目，横幅就会出现在我的Android上，但看起来很糟糕。它太宽了，它与页面上的其他对象重叠。

Screeny：

我有什么想法可以修改CSS，以便在所有设备上看起来都不错？在此先感谢：）

Answer 1

@media only screen and (min-width: 480px) and (max-width: 768px) {

header_banner {width：100％; font-size：你需要/想要的大小！重要; .nag-bar-widget {width：90％;

}} }

解释：您必须更改为元素提供固定大小的样式属性。你需要的！important，因为span元素的font-size是在html文档中定义的。

如果有任何不清楚的地方，请告诉我。

Answer 2

使用％而不是px，您需要使菜单响应而不是设置为设置大小，因为在较小的设备上查看时它不会相应地进行调整。上面的答案是完美的，并将起作用。 在使用跨设备站点时，始终使站点响应，因为它应该跨平台工作。 我希望这会有所帮助。

      .nag-bar-widget {
    width: 100%;
    height: 1000%;
    overflow: hidden;
    }
        #header_banner {
margin: 0 auto;
overflow: hidden;
background: url(images/banner.png) no-repeat;
position: absolute;
left: 50%;
margin-left: -340px;
text-align: left;
width: 50%;
height: 30%;
top: 50%;
padding: 5px 21px 10px;
z-index: 100;
}

此外，您拥有图像和文字的div也是正确的。

    <div style="margin-top: auto;">
<a href="http://shoeporn.com/go/keen-akita-ankle-boot" target="_blank"><img src="http://shoeporn.com/wp-content/uploads/2013/11/Keen-Akita-Ankle-Boot.jpg" style="border:1px #BBBBBB solid; height:50px; vertical-align:middle; margin-right:10px;"></a>
<span style="font-size:2em;"><a href="http://shoeporn.com/go/keen-akita-ankle-boot" target="_blank" style="color:black;">Keen Akita Ankle Boot - now on sale for $44.99!</a></span>
</div>

对

进行更改

   .tack_entry {
-webkit-box-shadow: 0px 1px 2px 0px rgba(34, 25, 25, .4);
box-shadow: 0px 1px 2px 0px rgba(34, 25, 25, .4);
background-color: #FFFFFF;
margin: 0 auto;
width: 80%;
padding: 15% 10% 10%;
margin-bottom: 20px;
}

也是这些变化

 #header_banner {
margin: 0 auto;
overflow: hidden;
background: url(images/banner.png) no-repeat;
position: absolute;
left: 50%;
margin-left: -340px;
text-align: left;
width: 100%;
height: 85px;
top: 110px;
padding: 5px 21px 10px;
z-index: 100;
}

以及

    #logo {
left: 50%;
height: 16%;
top: 2px;
margin-left: -260px;
position: relative;
text-align: center;
}

<强>最后

 #header {
width: 85%;
margin: 0 auto;
position: relative;
}

这应该可以解决您的问题