在響應式設計中創建和刪除表格，Ruby on Rails 4

Question

我希望這樣，根據瀏覽器的寬度，應該創建或刪除表格。

在CSS中，您可以使用類似於：@media（min-width：767px），而css設置在寬度超過767px後更改。在軌道上有沒有類似的紅寶石？例如：

在我的書/ 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

有沒有在軌道上

是的，這就是所謂的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 %>