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

CSS React.js

西里神奇

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;
    }
}

任何帮助表示赞赏！

第2778篇《NextJs SSR无法识别移动版CSS Media查询》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
小小猿 2020.03.23

之前，React会自动在<head>您的SPA中插入以下内容：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

移至时SSR，职责转移到开发人员来自己添加此位。如果没有它，在@media查询断点时您将有一些非常意外的行为。当您解决您的问题后发现，这已经解决了已经。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android