在响应式设计中创建和删除表，Ruby on Rails 4

Question

我希望根据浏览器的宽度创建或删除表格。

在 CSS 中，您可以使用类似：`@media (min-width: 767px)，而 css-settings 会在宽度超过 767px 后发生变化。 ruby on rails 有类似的东西吗？例如：

在我的 book/view.html.erb 中有一个这样的表格：

<table>
  <tr>
    <th>Title</th>
    <th>Genre</th>
    <th>Description</th>
  </tr>
  <tr>
    <td><%= @book.title %></td>
    <td><%= @book.genre %></td>
    <td><%= @book.desc %></td>
  </tr>
</table>

我想要的是，宽度小于 767px 后，应该是这样的：

Title: <br>
<%= @book.title %><br>
Genre: <br>
<%= @book.genre %>
Description:
<%= @book.desc %>

我怎样才能做到这一点？提前致谢！

Answer 1

ruby on rails 有类似的东西吗

是的，它叫做browser - 一颗宝石：

[Browser] 添加了一个名为 browser 的辅助方法，用于检查您当前的用户代理：

#app/views/controller/your_view.html.erb
<% if browser.tablet? || browser.mobile? %>
   ... do something ...
<% end %>

--

然而，这个问题是它只在你渲染页面时才有效。

CSS Media queries 在页面改变尺寸时进行调整，这意味着如果您决定在桌面上调整应用程序的大小，CSS 将立即进行调整。

Rails 根据 HTTP 请求编译代码，这意味着它不能像 CSS 那样“改变”。虽然这对于平板电脑等应该不是问题，但它可能会导致台式机出现问题。

---

解决方案

我想要的是，宽度小于 767px 后，应该是这样的

<% if browser.mobile? %>

   Title: <br>
     <%= @book.title %><br>
   Genre: <br>
     <%= @book.genre %>
   Description:
     <%= @book.desc %>

<% else %>

    <table>
      <tr>
        <th>Title</th>
        <th>Genre</th>
        <th>Description</th>
      </tr>
      <tr>
        <td><%= @book.title %></td>
        <td><%= @book.genre %></td>
        <td><%= @book.desc %></td>
      </tr>
    </table>

<% end %>

完全的 CSS 解决方案（强烈推荐）：

#app/assets/stylesheets/application.css
@media screen and (max-width: 767px) {
   .big   { display: none; }
   .small { display: block; }
}

#app/view
<%= content_tag :div, class: "big" do %>
   <table>
     <tr>
         <th>Title</th>
         <th>Genre</th>
         <th>Description</th>
      </tr>
      <tr>
         <td><%= @book.title %></td>
         <td><%= @book.genre %></td>
         <td><%= @book.desc %></td>
       </tr>
    </table>
<% end %>
<%= content_tag :div, class: "small" do %>
   Title: <br>
     <%= @book.title %><br>
   Genre: <br>
     <%= @book.genre %>
   Description:
     <%= @book.desc %>       
<% end %>