媒体查询未按预期工作

时间:2016-01-24 10:16:05

标签: css

我有一个网站,我想对移动使用做出响应。所以我在我的应用程序中安装了波旁威士忌并整理了我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;

1 个答案:

答案 0 :(得分:0)

我真的不了解你问题的某些内容,例如,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>
&#13;
&#13;
&#13;