Question

我试图用bootstrap进行媒体查询。我把它放在我的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;
}

我应该怎么做以便检测查询？

Answer 1

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

的顶部添加= require_self。

Answer 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;
    }
}

Answer 3

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

应该是：

body {
    background-color: red;
}

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

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

其次尝试在你的一般css之后写一下你的媒体查询（@media styles）到文件的末尾，我想应该解决这个问题。

希望有所帮助：）

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

3 个答案: