android - 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 上，但它看起来很糟糕。它太宽了，并且与页面上的其他对象重叠。

画面:

有什么想法可以修改 CSS 使其在所有设备上看起来都不错吗？提前致谢:)

Answer 1

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

header_banner { 宽度:100%；字体大小:你需要/想要的大小!重要； .nag-bar-widget { 宽度:90%;

} }

说明:您必须更改赋予元素固定大小的样式属性。您需要的 !important，因为 span 元素的字体大小是在 html 文档中定义的。

如果有什么不清楚的，请告诉我。