Question

现在我的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并将此代码放在那里。但它不起作用。我该如何解决这个问题？

Answer 1

将它们放入application.css：

#app/assets/stylesheets/application.css
@media (max-width: 900px) {
  .green-button { display: none; }
  .chat_button  { margin-top: 20px; }
  #myCarousel   { height:800px; }
}

我创建了文件mobile.css

如果您使用@media查询，那么

@media次查询会根据视口大小更改HTML的样式。虽然手机/平板电脑可以更改视口大小，但它们通常不需要完全独立的CSS结构。

对于“移动”样式表的旧需求源于这样一个事实，即iPhone之前的移动互联网至多是基本的。现在我们在手机上有完整的HTML渲染，你只需要改变每个元素的大小/可见度。

Rails - 默认情况下 - 恳求您在application.css中使用layout，其中应包含@media个查询：

#app/views/layouts/application.css
<%= stylesheet_link_tag :application %>

Answer 2

在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资产管道：

http://guides.rubyonrails.org/asset_pipeline.html#asset-organization

一些建议：

你在你的CSS中混合了camelCase和破折号：避免这种情况。
您要为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;
  }

rails包含@media css标签的位置？

2 个答案: