媒体查询不能按预期工作

Question

我有一个网站，我想为移动应用做出响应。所以我安装波旁威士忌和我的应用程序整齐和进口在我application.sass

@import "bourbon" 
@import "neat" 
@import "grid-settings" 

@import "mobile" 
@import "desktop" 

的grid-settings看起来是这样的，

@import "neat-helpers" 

// Define your breakpoints 
$mobile: new-breakpoint(max-width 480px) 
$desktop: new-breakpoint(min-width 481px) 

我的想法中的所有文件是创建于SASS文件，一个用于移动和一个桌面，

所以在我mobile.sass我有，

body, html 
    @include media($mobile) 

而对于我desktop.sass我有，

body, html 
    @include media($desktop) 

但是，当我检查页面和改变浏览器的大小为300像素的宽度或1300px宽度的内容保持不变。

如果我检查一个元素，我可以从移动设备和桌面文件中看到两种样式，但桌面css会覆盖移动样式。

因此，在此示例中，使用了顶部样式（桌面），底部样式通过（无效）进行了条纹。

media="all" 
.container-wrapper .another-wrapper .movie_container { 
    width: 11.5%; 
    display: flex; 
    margin: 0 0.5%; 
    transition: all 0.5s; 
} 
media="all" 
.container-wrapper .another-wrapper .movie_container { 
    width: 23%; 
    display: flex; 
    margin: 0 1%; 
    transition: all 0.5s; 

Answer 1

我真的不明白你的问题的一些事情，例如，什么是media = all意味着在你的CSS？

媒体查询是@at-rules当给定的条件返回true，基本上是将被启用，类似于一个简单的if语句，你可以在所有其他编程语言找到。

例子：

.example { 
 
    height: 200px; 
 
    width: 100%; 
 
    transition: 400ms all linear; 
 
} 
 

 
.example:before { 
 
    display: block; 
 
    padding: 2em; 
 
    text-align: center; 
 
} 
 

 
@media (max-width: 400px) { 
 
    .example { 
 
    background: lightseagreen; 
 
    } 
 
    
 
    .example:before { 
 
    content: '@media(max-width: 400px)'; 
 
    } 
 
} 
 

 
@media (min-width: 401px) { 
 
    .example { 
 
    background: lightcoral; 
 
    } 
 
    
 
    .example:before { 
 
    content: '@media(min-width: 401px)'; 
 
    } 
 
}

<div class="example"> 
 
</div>