ruby-on-rails – Rails pixelarity模板(skel)

发布时间：2020-12-17 04:13:27 所属栏目：百科来源：网络整理

导读：我想在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: {

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

在这一刻,我使用公共目录,所有这些东西都有效,但它不对,我觉得它(我在那里没有minifing).

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

谢谢！

解决方法

您可以使用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
}

如果您需要任何帮助,请检查并告诉我们.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!