NextJs SSR无法识别移动版CSS Media查询

西里神奇2020-03-23

我刚刚将Nextjs SSR集成到我的React项目中。在此之前，我对移动响应的CSS媒体查询运行良好。现在，当我使用Chrome浏览器的工具在移动屏幕尺寸甚至我自己的设备上查看我的应用程序时，我得到的视图就像在桌面上一样。

似乎服务器正在渲染整个页面并采用桌面大小，并且在到达客户端时未重新渲染。如果是这样，我如何告诉用户该用户是移动用户并使用这些CSS查询？

这是我的媒体查询，似乎无效。我没有在JS中使用CSS，也许应该吧？我为每个组件使用常规的CSS文件。

.Footer {
    width: var(--webMaxContentWidth);
    height: 200px;
    background: #368efb;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (max-width: 768px) {
    .Footer {
        width: 100%;
        height: 400px;
        margin: 0 20px;
    }
}

任何帮助表示赞赏！