Question

我真的很容易为那些真正知道如何...的人解决问题。

从可用的代码我混合了一些css，目前正在寻找我正在寻找的东西，但只是在一个封闭的环境中。当我将它包含在现有的jekyll模板中时，它只会产生垃圾。

这里的功能性（容器 - 目前px和em混合在一起，没关系）

.columnsContainer {
  position: relative;
  max-width: 700px;
  margin: auto;
}

.leftColumn {
  margin-bottom: 10px;
  padding: 5px;
}

@media screen and (min-width: 47.5em ) {
  .leftColumn { margin-right: 21em; }
    .rightColumn { position: absolute;
    top: 0;
    right: 0;
    width: 20em;
    padding: 10px;
  }
}

.head-img {
    width: 300px;
    max-width: 95%;
    background-color: $white;
    padding: 0px;
    display: block;
    vertical-align:middle;
    margin-left: auto;
    margin-right: auto;
}

我希望将它包含在一个jekyll主题中，其中包含现有的媒体查询：

$on-palm:          500px;
$on-laptop:        650px;


@mixin media-query($device) {
    @media screen and (max-width: $device) {
        @content;
    }
}

如何让这两个人一起工作？

Answer 1

解决：向main.css添加另一个媒体查询：

@mixin media-query-two($device) {
    @media screen and (min-width: $device) {
        @content;
    }
}

现在，还有其他问题......

CSS媒体查询功能

1 个答案: