现在我的layout.html.erb中有一些带有@media的CSS规则
<style>
@media (max-width: 900px) {
.green-button{
display: none!important;
}
.chat_button{
margin-top: 20px!important;
}
#myCarousel{
height:800px!important;
}
</style>
我想摆脱它们并将它们放入 css 文件中。在我的 css 文件夹中，我创建了文件 mobile.css 并将此代码放在那里。但这不起作用。
我该如何解决这个问题？
最佳答案
在 Rails 中，保持 css 有序非常重要。
你应该有一个主要的app/assets/stylesheets/application.css文件，您可以在其中列出要在应用程序中导入的所有 css 文件。
所以，如果你有 app/assets/stylesheets/mobile.css文件，内容为application.css将是:
/*
*= require mobile
*/
然后，在您的页面中，您必须包含 <head>标记如下:
<%= stylesheet_link_tag 'application', media: 'all' %>
请学习以下内容以更好地了解 Rails Assets Pipeline:
http://guides.rubyonrails.org/asset_pipeline.html#asset-organization
一些建议:
- 您在 CSS 中混合了驼峰式和破折号:避免这种情况。
- 您正在为 ID 分配样式:避免这种情况。
- 您正在使用
!important太频繁:避免这种情况。
仅使用类来定义CSS，不使用camelCase，仅使用- (破折号)。避免!important如果可以的话。如果有时间，请查看 CSS 样式指南。
作为进一步的步骤，我还建议您转向 scss。
重命名您的mobile.css进入mobile.scss并像这样重构它:
$breakpoint: 900px;
@media (max-width: $breakpoint) {
.green-button {
display: none !important;
}
.chat_button{
margin-top: 20px !important;
}
#myCarousel {
height:800px !important;
}
关于css - Rails 在哪里包含 @media css 标签？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35197885/