Question

我想在pixelarity的Rails 4.2.6 app模板中使用（比如这个例子http://pixelarity.com/elemental）。

所以，我在main.js（片段）中有一些有趣的构造

    skel.init({
    reset: 'full',
    breakpoints: {
        'global':   { range: '*', href: 'style.css', containers: 1400, grid: { gutters: 48 } },
        'wide':     { range: '-1680', href: 'style-wide.css', containers: 1200 },
        'normal':   { range: '-1280', href: 'style-normal.css', containers: '100%', grid: { gutters: 36 } },
        'narrow':   { range: '-960', href: 'style-narrow.css', grid: { gutters: 32 } },
        'narrower': { range: '-840', href: 'style-narrower.css', containers: '100%!', grid: { collapse: true } },
        'mobile':   { range: '-736', href: 'style-mobile.css', grid: { gutters: 20 }, viewport: { scalable: false } }
    },

我的layout.html.slim包含

= stylesheet_link_tag "application", :media => "all"
= javascript_include_tag "application"

所以，当分辨率改变时，js会插入另一个css。完善！

但我不明白如何将它附加到我的应用程序。

如果我把文件放在application.scss中，它将被加载到每个页面，这是错误的，文件名将被更改。

此刻我使用public dir，所有这些东西都有效，但它不对，我觉得它（而且我没有minifing）。

如何以rails方式使用它？我如何留下这些css文件的minifing，并将它们与原始名称分开？

谢谢！

Answer 1

您可以使用css3媒体查询来实现此功能。您可以在以下链接中阅读有关CSS3媒体查询的更多信息。

让我解释一下你可以做些什么来解决这个问题，这样你就可以快速前进，并在有时间时阅读媒体查询。您可以在application.scss中添加所有这些代码，因为它在layout.html.slim中加载。您可以复制style-mobile.css的样式并粘贴application.scss中的以下代码块。

@media (max-width: 736px) {
  // STYLES OF "style-mobile.css" GOES HERE
}

您可以复制style-narrower.css的样式并粘贴到以下代码块application.scss之间。

@media (max-width: 840px) {
  // STYLES OF "style-narrower.css" GOES HERE
}

您可以复制style-narrow.css的样式并粘贴到以下代码块application.scss之间。

@media (max-width: 960px) {
  // STYLES OF "style-narrow.css" GOES HERE
}

您可以复制style-normal.css的样式并粘贴到以下代码块application.scss之间。

@media (max-width: 1280px) {
  // STYLES OF "style-normal.css" GOES HERE
}

您可以复制style-wide.css的样式并粘贴到以下代码块application.scss之间。

@media (max-width: 1680px) {
  // STYLES OF "style-wide.css" GOES HERE
}

如果您需要任何帮助，请检查并告知我们。

Answer 2

根据我在Drupal上使用Pixelarity的经验，我建议在你自己的index.html中包含http://pixelarity.com/elemental模板（或任何你的名字......），确保所需文件的链接是正确的（所有你需要进入名为'assets'的pixelarity目录。现在，加载你的应用程序，你应该看到elementar在行动。从那里，您可以开始使用您的铁路应用程序生成的数据为您提供应用程序。

Rails pixelarity模板（skel）

2 个答案: