【问题标题】:Ruby on Rails: CSS for different devicesRuby on Rails:适用于不同设备的 CSS
【发布时间】:2012-08-28 10:32:16
【问题描述】:

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

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

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

【问题讨论】:

    标签: css ruby-on-rails ruby-on-rails-3 stylesheet


    【解决方案1】:

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

    这是一个例子:

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

    【讨论】:

    • 谢谢,这正是我需要的
    【解决方案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

    【讨论】:

    • 感谢您的建议。我曾尝试更改我的应用程序,以便 Bootstrap 可以使用它,但我认为我要彻底改变我的应用程序。下次一定会记住这一点。再次感谢
    【解决方案3】:

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

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

    【讨论】:

    • 感谢您的文章。这正是我所需要的。干杯
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-07-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多