css - 我的媒体查询未按预期更改

Question

目前我正在尝试更改登录页面文本的填充，因此它将平滑滚动按钮推到页面底部。然而，查询一直工作到（最小宽度：600px），并且它们不会变高。

Mixins 部分

@mixin for-phone-only {
    @media (max-width: 599px) {
        @content;
    }
}

@mixin for-tablet-portrait {
    @media (min-width: 600px) {
        @content;
    }
}

@mixin for-tablet-landscape {
    @media (min-width: 899px) {
        @content;
    }
}

@mixin for-desktop-up {
    @media (min-width: 1200px) {
        @content;
    }
}

着陆页部分

.welcomeTitle {
font-family: $landing-font;
font-size: $landing-header-size-l;
text-shadow: 1px 1px 15px #000;
padding-top: 20%;
@include for-phone-only {
    font-size: $landing-header-size-sm;
}

}

.welcomeText {
@include for-desktop-up {
    padding: 0 20% 21.5% 20%;
    font-size: $landing-text-size-l;
}

@include for-tablet-landscape {
    padding: 0 20% 20% 20%;
}

@include for-tablet-portrait {
    padding: 0 20% 60% 20%;
}

@include for-phone-only {
    padding: 0 20% 50% 20%;
}


}

所以它应用了平板纵向查询，但是当宽度超过 899px 时，它不应用平板横向，或者当它超过 1200px 时，它不应用桌面查询。

感谢：D

标签： csssassmedia-queries