jus*_*lbs 8 css reactjs next.js
我刚刚将 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;
}
}
任何帮助表示赞赏！
And*_*man 12
之前，React 会自动在<head>您的 SPA 中插入以下内容：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
一旦转移到SSR，责任就转移到开发人员自己添加这一点。没有它，当涉及到@media查询断点时，您将有一些非常意外的行为。正如您在解决问题后发现的那样，这已经解决了。