Question

我正在使用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：）

CSS / SASS：媒体查询无法读取/查看

1 个答案: