Rails 中的@media CSS答案

【问题标题】：@media CSS in RailsRails 中的@media CSS
【发布时间】：2019-03-18 20:18:28
【问题描述】：

所以，我正在我的 rails 项目中尝试在 CSS 中使用 @media。我有一个只需要在移动设备上显示的文本这是代码

a.html.erb

    <div class="A__b--c-d"> 
    <%= link_to .......
     ....
    </div>

b.scss

div.A__b--c-d {
    display: none;
}




@media only screen and (min-width: 200px) and (max-width: 900px){
  .A__b--c-d{
     display: inline-block;
   }
 }

我似乎无法在移动设备上显示文字。

这是我到目前为止所尝试的。

 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 Pasted this in Chrome inspect element

 All the names are right

【问题讨论】：

标签： css ruby-on-rails ruby-on-rails-4 media-queries

【解决方案1】：

您需要删除 .div 并在媒体查询中选择最大宽度。

.A__b--c-d {
  display: none;
}

@media only screen and (max-width: 900px){
  .A__b--c-d{
     display: inline-block;
   }
 }

【讨论】：

【解决方案2】：

您在媒体查询中犯了一个错误。试试这个

 .A__b--c-d {
    display: none;
}
@media only screen and (max-width: 900px){
  .A__b--c-d{
     display: inline-block;
   }
 }

【讨论】：