1

我敢肯定有一个简单的答案...

使用 Twitter Bootstrap，我的style.css.erb文件中有这个：

.login_page body {height:100%;
        max-width:inherit;
        margin:0 20px;
        background-image: url(<%= image_path 'oap_dotlogo.png' %>);
        background-repeat: no-repeat;
            background-position: 5%, 80%;
        background-color: #E3F5FD;
    }

这很好，除了在背景徽标令人头疼的手机上。我想把那个标志放在手机上。

我看到bootstrap-responsive.css已经定义了 .hidden-phone：

@media (max-width: 767px) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
}

那么，如何修改 style.css.erb 以使 background-image 标签具有.hidden-phone类？

我已经尝试了在 style.css.erb 中添加 .hidden-phone 的一些排列，但似乎没有任何效果 - 我一定是语法错误。

谢谢！戴夫

4

2 回答 2

2

听起来您在这里混淆了 CSS 和 HTML。当你说：

[H]如何修改 style.css.erb 以使 background-image 标签具有 .hidden-phone 类？

...您不能将类添加到 CSS 声明中。您实际上并不想隐藏您的元素（body在本例中为），而是在您想要修改background属性的小屏幕尺寸时。因此，在您已经拥有的媒体查询中，添加以下内容：

@media (max-width: 767px) {
  .login_page body { background-image: none; }
  ...
  all your other small-screen styles
}

然后，默认将显示您的background-image并且您正在为小屏幕删除它。如果图像很大，您可能会考虑移动优先的方法。即相反，正如@po228 提到的那样 - 只添加background-image更大的视口宽度。

于 2013-03-14T15:57:52.937 回答
0

看起来你很接近。要定义不会在手机上显示的样式，您需要使用 min-width，而不是 max-width。尝试以下操作：

@media only screen and (min-width: 768px) {
    .login_page body {
        background-image: url(<%= image_path 'oap_dotlogo.png' %>);
        background-repeat: no-repeat;
        background-position: 5%, 80%;
    }
}
于 2013-03-14T15:49:37.133 回答