CSS/SASS : Media Queries not being read/seen

Question

这个问题已经有答案了:

Why are my CSS3 media queries not working on mobile devices? (23 个回答)

已关闭 9 年前。

我正在使用 Ruby on Rails，并且我在 application.css.scss 中设置了所有样式

body{
    //GLOBAL STYLES

    @media only screen and (max-width: 770px){
        //MOBILE ONLY STYLES
    }

    @media only screen and (min-width:771px) and (max-width:1040px){
        //TABLET ONLY STYLES
    }

    @media (min-width: 771px){
        //STYLING COMMON TO BOTH TABLET AND DESKTOP
    }

    @media (min-width: 1040px){
        //DESKTOP ONLY STYLES
    }

}

当我调整浏览器的大小时，媒体查询似乎工作正常，但我的手机上没有显示任何移动样式。任何有关原因的帮助将不胜感激。

Answer 1

响应式

虽然我很想在每个元素的基础上声明媒体查询，但我们之前只是通过自己显式调用它们来使其工作:

#app/assets/stylesheets/application.css.scss
@media screen and (max-width: 770px){
   body   { ... }
   footer { ... }
}

@media screen and (min-width:771px) and (max-width:1040px){
   body   { ... }
   footer { ... }
}

您可以see some of our responsive styling here

--

顺便说一下，media queries are not specific to SASS/SCSS :)