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

Question

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

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

示例

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

<% 10.times do %>

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

<% 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 的评论中，您必须考虑两个问题：

1. 您的 CSS 应该是预编译的，这意味着您必须在编译之前（而不是在运行时）完成所有循环。如果您不预编译它，请为性能大幅下降做好准备。

2. 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%; }
}