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)

但是当我检查页面并将浏览器大小更改为300px宽度或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语句语言。

示例：

＆＃13;

.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)';
  }
}

＆＃13;

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

＆＃13;

媒体查询未按预期工作

1 个答案: