我是 Rails 新手，我已经完成了我的第一个 Web 应用程序。我现在正在寻找我的应用程序的样式。我意识到我需要考虑我的应用程序在不同设备上的外观，但我真的不知道如何或最好的方式来解决这个问题。无论页面在什么设备上呈现，有没有一种方法可以让我拥有标准的外观？
我开始四处移动对象以适应笔记本电脑上的外观，但在平板电脑上查看页面时，有些东西会留在应有的位置，但其他东西会从页面边缘消失，基本上会打乱我的风格有（我认为这与使用绝对定位有关）。我想我只是希望他们的设备看起来是一成不变的页面，用户必须在他们的设备上放大和缩小，而不是针对他们的设备优化页面。
任何帮助都将不胜感激。谢谢
【问题讨论】：
标签： css ruby-on-rails ruby-on-rails-3 stylesheet
您可能希望使用 CSS 媒体查询来根据您的屏幕宽度/高度优化/更改 CSS 规则。这些只是客户端浏览器应用的普通 CSS 文件，因此您不必在自己身边弄乱它们。
这是一个例子：
@media all and (max-width: 430px) and (min-width: 360px) {
/* put your mobile css in here */
}
【讨论】：
这是一个相当好的问题。解决方案是使用 twitter 引导框架。您必须在 gems 文件中包含一个 gem 并捆绑它； 'bootstrap-sass'，'2.0.0'。之后将其导入您的自定义 css 并根据您的需要使用。 Bootstrap 是 twitter 优秀团队的响应式框架。 bootstrap 基本上为您提供了一个响应式框架，以便您的应用程序可以根据客户端屏幕自动调整其尺寸，无论您的应用程序将根据它调整什么屏幕尺寸。它有一个网格系统，使它能够以这种方式运行。
您想访问一些可以帮助您实现所需目标的网站， 在此处了解有关引导程序的更多信息http://twitter.github.com/bootstrap/ 此外，我为您的问题推荐的 gem 也具有 Sass 功能，因此您可能还想检查一下 http://sass-lang.com/tutorial.html
【讨论】：
您需要阅读媒体查询。 Twitter bootstrap 是一个很棒的框架，但是如果您已经拥有自己喜欢的 CSS（或者如果您只是想学习新东西），您可以使用媒体查询设置自己的响应式设计。一个不错的起点是 this Smashing Magazine article 关于创建移动网站。
如果您想从每个人都喜欢并内置响应式设计的本月框架重新开始，请查看 Twitter Bootstrap，它有非常棒的文档来帮助您开始使用它。
【讨论】：