Question

我正在尝试使用移动响应网格时根据屏幕大小更改循环发生的次数。

我知道它在CSS中不起作用，但是对于不同的媒体屏幕尺寸，我希望循环发生不同的 x 次。

示例

当媒体屏幕尺寸至少为500像素时，我想要：

<% 10.times do %>

当媒体屏幕尺寸至少为700像素时，我想要：

<% 12.times do %>

当媒体屏幕尺寸至少为900像素时，我想要：

<% 15.times do %>

等等...

HTML 的

<div class="mediaContainer pure-g">
  <% 24.times do %>
    <div class="mediaGrid">
        <img src="http://www.some-image.jpg" class="pure-img id="commercialPic" alt="">
        </img>
        <h3 class="commercialTitle">Title</h3>
    </div>
  <% end %>
</div>

CSS

@media screen and (min-width: 35.5em){
  Only Loop 12 times
}

@media screen and (min-width: 48em){
  Only Loop 15 times
}

Answer 1

要添加到Wes Foster的评论，您必须考虑两个问题：

您的CSS应该预编译，这意味着您必须在编译之前完成所有循环（而不是在运行时）。如果您不预先编译它，请为大幅降低性能做好准备。
Ruby无法从DOM获取输入 - 它必须从JS或user_agent（浏览器信息）传递数据。可以认为Ruby是在完全独立的计算机上运行的（就是这样）。

-

答案 - 虽然不是你想要的直接 - 会改变你的CSS，这样你就不需要循环了。

如果您需要设计单个元素的样式，那么您做错了。 CSS有classes和ids是有原因的 - 你应该尽可能地设置.classes的样式，只为特定元素添加#id样式：

.table_row { 
   background-color: red;
}

.table_row#yellow { 
   background-color: yellow;
}

如果您想使用与媒体相关的宽度或其他东西，您应该将它们设置为动态（%），这样您就可以定义它们并让它们适应。

表格的一个很好的例子：

<table class="table">
  <tr>
     <td>Test</td>
     <td>Test2</td>
     <td>Test3</td>
  </tr>
  <tr>
     <td>Test</td>
     <td>Test2</td>
     <td>Test3</td>
  </tr>
</table>

table.table       { width: 100%; }
table.table tr td { width: 33%;  }

@media screen and (min-width: 35.5em){
  table.table tr td { width: 25%; }
}

根据屏幕大小更改rails循环上的数字

1 个答案: