使用 rails bootstraps-saas 进行媒体查询答案

【问题标题】：Media query with rails bootstraps-saas使用 rails bootstraps-saas 进行媒体查询
【发布时间】：2016-02-01 18:12:56
【问题描述】：

我正在尝试使用引导程序进行媒体查询。我把它放在我的 application.css.scss 文件中，但这不起作用：

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require 'masonry/transitions'
 *= require_tree 
 *= require_self
 */



@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome";




$backgroundNav : #ffffff;
$backgroundBody : #E9E9E9;
$red : #FD0E48;

@media screen and (max-width: 770px){ 

    .body {
        background-color: red;
    }

}


 body {
    background: $backgroundBody;
}

我应该怎么做才能使查询被检测到？

【问题讨论】：

你把这些风格送给了谁？元素选择器在哪里？
你的风格应该可以。检查元素，看看是否有东西覆盖了这些样式。
在我的检查中没什么特别的，背景保留了我在 application.css.scss 中为我的 .post 设置的背景颜色#ffffff
@jmcastel，你的application.css.scss 中有字符串*= require_tree . 和*= require_self 吗？
@IgorIvancha 是的，请查看我对完整文件的编辑

标签： ruby-on-rails twitter-bootstrap-3 media-queries bootstrap-sass

【解决方案1】：

Application.css.scss 是一个清单文件，您应该定义需要哪些文件。如果你想在 application.css.scss 中编译代码，你应该在 application.css.scss 顶部添加= require_self

【讨论】：

不幸的是这并没有改变任何东西

【解决方案2】：

我相信你选错了。

.body {
    background-color: red;
}

.body 选择类为body 的元素，例如<div class="body">foobar</div>

您可能打算选择body 元素：

body {
    background-color: red;
}

Also, put your @media styles after the "normal" ones.

body {
    background: $backgroundBody;
}

/* responsive body styles */
@media screen and (max-width: 770px){
    body {
        background-color: red;
    }
}

Here's the fiddle - resize the window to see the change.

既然 RoR 支持 SASS，为什么不使用它呢？

body {
    background: $backgroundBody;

    @media screen and (max-width: 770px){
        background: $backgroundBody;
    }
}

【讨论】：

【解决方案3】：

首先你在媒体查询中的 CSS 是错误的。

应该是：

body {
    background-color: red;
}

而不是 .body，因为它将搜索具有“body”类的元素，例如：

<p class="body> 
     content
</p>

第二次尝试在文件末尾的一般 css 之后编写媒体查询（@media 样式），我认为这应该可以解决问题。

希望有帮助:)

【讨论】：