我的媒体查询没有根据需要更改

Question

当前，我正在尝试更改目标网页文本的填充，因此它将平滑滚动按钮推到页面底部。但是，查询直到（最小宽度：600像素）才起作用，并且它们的变化不会更高。

Mixins Partial

@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