Html 让css涂鸦响应媒体查询

我已经使用css涂鸦为我的页面设置了背景。在全屏幕上看起来不错，但由于我的网格设置方式，形状随着屏幕的变化而变小，在分屏或模拟移动设备时完全不可见。我希望它们在视觉上总是一样大

这是一个我尝试添加的媒体查询，但似乎没有任何作用。（我是RWD的新手，所以我不确定问题出在哪里。）

这是我的CSS涂鸦代码

<css-doodle grid="5" class="doodle">
    :doodle {
        @grid: 50 / 100vmax;
        grid-gap: 30px;
    }

    background: white;
    opacity: @r(-1, .08);
    clip-path: polygon(51% 26%, 0% 100%, 100% 100%);
</css-doodle>

：涂鸦{
@网格：50/100vmax；
栅极间隙：30px；
}
背景：白色；
不透明度：@r（-1.08）；
剪辑路径：多边形（51%26%，0%100%，100%100%）；

使用的示例，我尝试使用

em

单位，而不是

vmax

html{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
}
身体{
背景：线性梯度（到底部，rgb（8,36,83），rgb（2,91,137））；
}
杜德尔先生{
位置：固定；
z指数：-1；
动画：旋转200秒无限；
}
@关键帧旋转{
从{
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
到{
-webkit变换：旋转（360度）；
变换：旋转（360度）；
}
}
@仅介质屏幕和（最大宽度：600px）{
杜德尔先生{
@网格：25/100em；
栅隙：20px；
}
}

：涂鸦{
@网格：50/100em；
栅极间隙：30px；
}
背景：白色；
不透明度：@r（-1.08）；
剪辑路径：多边形（51%26%，0%100%，100%100%）；
动画：r（10s，50s）无限线性流；
@关键帧流{
0%, 100%{
-webkit转换：translate3d（0,0,0）；
变换：translate3d（0,0,0）
}
50% {
-webkit转换：translate3d（@r（-500%，1000%），@r（-500%，1000%），0）；
转换：translate3d（@r（-500%，1000%），@r（-500%，1000%），0）；
}
}

您能为您的代码制作一个演示吗？这是：非常感谢！这正是我们所需要的。

<css-doodle grid="5" class="doodle">
    :doodle {
        @grid: 50 / 100vmax;
        grid-gap: 30px;
    }

    background: white;
    opacity: @r(-1, .08);
    clip-path: polygon(51% 26%, 0% 100%, 100% 100%);
</css-doodle>