Ruby on Rails：不同設備的CSS

我是rails新手，已經完成了我的第一個web應用程序。我現在正在看我的應用程序樣式。我意識到我需要考慮如何在不同的設備上看我的應用程序，但不知道如何，或者最好的方式來解決這個問題。有沒有辦法讓我可以有一個標準的外觀，無論該頁面呈現在什麼設備上？Ruby on Rails：不同設備的CSS

我開始移動物體以適應在筆記本電腦上的外觀，但在平板電腦上查看頁面時，有些東西停留在應該放置的位置，但有些則消失在頁面邊緣，基本上弄亂了樣式我有（我認爲這與使用絕對定位有關）。我想我只是希望他們的設備能夠看到一個堅實的頁面，用戶必須在設備上放大或縮小頁面，而不是優化設備的頁面。

任何幫助都將非常感激。謝謝

來源

2012-08-28 Jazz

您可能想要使用CSS媒體查詢根據您的屏幕寬度/高度來優化/更改CSS規則。這些只是通常由客戶端瀏覽器應用的CSS文件，所以你不必在你身邊弄亂它們。

下面是一個例子：

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

來源

2012-08-28 10:36:38 pduersteler

謝謝，這正是我需要的 – Jazz

這是一個非常好的問題。解決方案是使用twitter引導框架。你將不得不在你的寶石文件中包含一個寶石並捆綁它; 'bootstrap-sass'，'2.0.0'。之後，將其導入您的自定義CSS並根據您的需要使用。Bootstrap是由優秀團隊在Twitter上提供的響應式框架。 Bootstrap基本上提供了一個響應式框架，以便您的應用根據客戶端屏幕自動調整其尺寸，無論您的應用將根據其調整屏幕大小。它有一個網格系統，可以使其以這種方式運作。

您想訪問幾個網站，將幫助你實現你在找什麼，瞭解一點關於引導這裏http://twitter.github.com/bootstrap/ 此外，我建議有關問題的寶石有其無禮的功能，所以你可能想要查看它也http://sass-lang.com/tutorial.html

來源

2012-08-28 10:43:43

感謝您的建議。我試圖改變我的應用程序，以便Bootstrap可以使用它，但我認爲我已經深入到我的應用程序中來完全改變它。下次肯定會記住這一點。再次感謝 – Jazz

您需要閱讀媒體查詢。 Twitter bootstrap是一個很好的框架，但是如果你已經擁有你喜歡的CSS（或者你只是想學習新的東西），你可以使用媒體查詢來設置自己的響應式設計。一個體面的地方開始是this Smashing Magazine article關於創建一個移動網站。

如果你想重新開始每個人都喜歡的月份框架，並且內置了響應式設計，那麼請查看Twitter Bootstrap，它有非常棒的文檔，可以幫助你開始使用它。

來源

2012-08-28 14:17:20 lyonsinbeta

感謝您的文章。這正是我需要的。乾杯 – Jazz

Ruby on Rails：不同設備的CSS

回答

相關問題