所以,我在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,并将它们与他们的初始名称分开？
谢谢！
解决方法
> 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
}
如果您需要任何帮助,请检查并告诉我们.