ruby-on-rails - Rails ピクセル化テンプレート (skel)

Question

Rails 4.2.6 アプリテンプレートで pixelarity を使用したい (この例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を使用していますが、正しくないと感じています（そして、そこにはミニフィングがありません）。

レールでどのように使用できますか？この css ファイルのミニファイを残し、初期の名前で別々に残すにはどうすればよいですか?

ありがとうございました！

score 0 · Accepted Answer

この機能は、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
}

確認して、助けが必要な場合はお知らせください。

ruby-on-rails - Rails ピクセル化テンプレート (skel)

2 に答える 2

Related

Reference