gpt4 book ai didi

ruby-on-rails - Rails 像素化模板 (skel)

转载 作者:行者123 更新时间:2023-12-04 12:57:32 25 4
gpt4 key购买 nike

我想在我的 Rails 4.2.6 应用程序模板中使用像素级(例如这个例子 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,所有这些东西都在哪里起作用,但这是不对的,我感觉到了(而且我在那里没有缩小)。

我如何以 Rails 方式使用它?我怎样才能留下这个 css 文件的缩小,并用它们的初始名称分开它们?

谢谢!

最佳答案

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

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

    关于ruby-on-rails - Rails 像素化模板 (skel),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36879072/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com