CSS/SASS：媒体查询没有被读取/看到[重复]

Posted 2023-03-06

【中文标题】CSS/SASS：媒体查询没有被读取/看到[重复]

【英文标题】：CSS/SASS: Media Queries not being read/seen [duplicate]

【发布时间】：2014-10-14 23:25:49

【问题描述】：

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

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

【问题讨论】：

尝试使用min-device-width

为什么要将媒体查询放在body 标签中？

【参考方案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。还要感谢您的提示，我已经对其进行了部分测试，到目前为止似乎还可以。一旦我在生产环境中测试了所有内容，我就会接受你的回答。

谢谢 bud - 让我知道它是否有效等 :)

抱歉等待，更改我的媒体查询并按照可能的重复链接的建议添加元标记。感谢您的所有帮助！