1

我是 Rails 新手，我已经完成了我的第一个 Web 应用程序。我现在正在寻找我的应用程序的样式。我意识到我需要考虑我的应用程序在不同设备上的外观，但我真的不知道如何或最好的方式来解决这个问题。无论页面呈现在什么设备上，有没有一种方法可以让我拥有标准外观？

我开始四处移动对象以适应它在笔记本电脑上的外观，但在平板电脑上查看页面时，有些东西会留在应有的位置，但其他东西会从页面边缘消失，基本上会打乱我的风格（我认为与使用绝对定位有关）。我想我只是希望他们的设备看起来是一成不变的页面，用户必须在他们的设备上放大和缩小，而不是为他们的设备优化页面。

任何帮助都将不胜感激。谢谢

4

3 回答 3

2

这是一个相当好的问题。解决方案是使用 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

于 2012-08-28T10:43:43.273 回答
2

您可能希望使用 CSS 媒体查询来根据您的屏幕宽度/高度优化/更改 CSS 规则。这些只是客户端浏览器应用的普通 CSS 文件，因此您不必在自己身边弄乱它们。

这是一个例子：

@media all and (max-width: 430px) and (min-width: 360px) {
  /* put your mobile css in here */
}
于 2012-08-28T10:36:38.697 回答
1

您需要阅读媒体查询。Twitter bootstrap 是一个很棒的框架，但是如果您已经拥有自己喜欢的 CSS（或者如果您只是想学习新东西），您可以使用媒体查询设置自己的响应式设计。一个不错的起点是这篇关于创建移动网站的 Smashing Magazine 文章。

如果您想从每个人都喜欢并内置响应式设计的本月框架重新开始，那么请查看Twitter Bootstrap，它有非常棒的文档来帮助您开始使用它。

于 2012-08-28T14:17:20.230 回答