Ruby on Rails：適用於不同設備的CSS

Question

我是Rails的新手，我已經完成了第一個Web應用程序的制作。 我現在正在設計應用程序的樣式。 我意識到我需要考慮我的應用程序在不同設備上的外觀，但並不真正知道該怎么做，也不是解決此問題的最佳方法。 無論在哪種設備上呈現頁面，有沒有一種方法可以使我具有標准外觀？

我開始四處移動對象，以適應筆記本電腦的外觀，但是在平板電腦上查看頁面時，有些東西停留在應有的位置，但其他東西從頁面邊緣消失了，基本上弄亂了我的風格（我認為與使用絕對定位有關。 我想我只是希望他們的設備看起來像石頭一樣的頁面，用戶必須放大和縮小他們的設備，而不是為他們的設備優化頁面。

任何幫助將不勝感激。 謝謝

Answer 1

您可能要使用CSS媒體查詢來根據屏幕的寬度/高度來優化/更改CSS規則。 這些只是客戶端瀏覽器所應用的普通CSS文件，因此您不必一頭霧水。

這是一個例子：

@media all and (max-width: 430px) and (min-width: 360px) {
  /* put your mobile css in here */
}

Answer 2

這是一個很好的問題。 解決此問題的方法是使用twitter bootstrap框架。 您將必須在其gems文件中包含一個gem並將其捆綁； 'bootstrap-sass'，'2.0.0'。 之后，將其導入您的自定義CSS中，並根據需要使用。 Bootstrap是Twitter的優秀團隊的響應框架。 引導程序基本上為您提供了一個響應框架，以便您的應用程序可以根據客戶端屏幕自動調整其維數，無論您的應用程序將根據屏幕大小進行調整。 它具有一個網格系統，使其能夠以這種方式運行。

您想訪問一些站點，這些站點可以幫助您實現所需的目標，在此處了解有關引導的更多信息http://twitter.github.com/bootstrap/我為您的問題推薦的gem也具有Sass功能也是如此，因此您可能還想查看一下http://sass-lang.com/tutorial.html

Answer 3

您需要閱讀媒體查詢。 Twitter引導程序是一個很好的框架，但是如果您已經擁有喜歡的CSS（或者如果您只是想學習新知識），則可以使用媒體查詢來設置自己的響應式設計。 《 Smashing Magazine》上有關創建移動網站的文章是一個不錯的起點。

如果您想重新開始每個人都喜歡並已內置響應式設計的月度框架，請查看Twitter Bootstrap ，它具有非常出色的文檔來幫助您開始使用它。