有条件的 CSS 媒体查询？答案

【问题标题】：CSS Media query with condition?有条件的 CSS 媒体查询？
【发布时间】：2018-05-02 22:26:02
【问题描述】：

我不确定如何准确地问这个问题。我正在使用 jQuery 在导航栏上触发动画（一旦开始滚动，导航栏就会变小 - 包括里面的徽标图像）。一切都很好。有“进”和“出”动画。

我的问题是我有一个 CSS 媒体查询，可以将徽标图像大小减小到 1200 像素。 “进”和“出”动画包括不考虑屏幕尺寸的实际尺寸。因此，当浏览器达到 1200 像素时，徽标的大小会减小。但是一旦用户开始滚动然后滚动回顶部，就会触发 jQuery“out”，并且徽标图像会恢复到原始（全屏）大小。

有没有办法告诉 jQuery 脚本回到原来的大小？

因为这是一个大型企业网站，所以很难呈现代码，但这里是 jquery 和 css 媒体查询...

$(document).ready(function()
{
var scroll = 0;
var target = $("#navtrip");
var offset = target.offset();

if (target.length) 
{
    $(document).scroll(function () 
    {
        scroll = $(this).scrollTop();

        if (scroll > offset.top) 
        {
            $(".bg-dark").css({
                "animation-name" : "bgchangein",
                "animation-duration" : "600ms",
                "animation-fill-mode" : "forwards"
            });
            $(".nav-link").css({
                "animation-name" : "navchangein",
                "animation-duration" : "600ms",
                "animation-fill-mode" : "forwards"
            });
            $("#logoimg").css({
                "animation-name" : "logochangein",
                "animation-duration" : "600ms",
                "animation-fill-mode" : "forwards"
            });
        } 
        else 
        {
            $(".bg-dark").css("animation-name", "bgchangeout");
            $(".nav-link").css("animation-name", "navchangeout");
            $("#logoimg").css("animation-name", "logochangeout");
        }
    });
}
});

和css

@keyframes bgchangein
{
    0%
    {
        background-color: #13293D89;
    }   
    100%
    {
        background-color: #13293D;
    }
}

@keyframes bgchangeout
{
    0%
    {
        background-color: #13293D;
    }
    100%
    {
        background-color: #13293D89;
    }
}

@keyframes navchangein 
{
    0% 
    {
        font-size: 100%;
    }
    100% 
    {
        font-size: 75%;
    }
}

@keyframes navchangeout 
{
    0% 
    {
        font-size: 75%;
    }
    100% 
    {
        font-size: 100%;
    }
}

@keyframes logochangein 
{
    0% 
    {
        height: 56px;
        width: 400px;
    }
    100% 
    {
        height: 28px;
        width: 200px;
    }
}

@keyframes logochangeout 
{
    0% 
    {
        height: 28px;
        width: 200px;
    }
    100% 
    {
        height: 56px;
        width: 400px;
    }
}

【问题讨论】：

标签： jquery css responsive-design media-queries

【解决方案1】：

您可以通过 jQuery 获取窗口宽度，然后将条件应用于导航栏动画，根据窗口宽度应用不同的值（或仅在某个宽度之上或之下应用动画）

原来如此

var window_width = jQuery(window).innerWidth();

获取窗口宽度，以及

if(window_width > 1200) {
   [...] (your animation script here)
}

作为条件

【讨论】：

总是简单的解决方案。谢谢你。很明显。