Rails pixelarity模板(skel)

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其中将为每个页面加载,这是错误的,文件名将被更改.

在这一刻,我使用publicdir,所有这些东西都可以工作,但它不对,我觉得它(我在那里没有minifing).

我如何以rails方式使用它？我怎么能留下这个css文件的minifing,并将它们与他们的初始名称分开？

谢谢!

Answer 1

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

• https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

• https://www.w3.org/TR/css3-mediaqueries/

• https://css-tricks.com/css-media-queries/

让我解释一下您可以采取哪些措施来解决此问题，以便您可以快速前进并在有时间时阅读有关媒体查询的内容。您可以添加所有这些代码，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
}

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