25
4
我刚刚将 Nextjs SSR 集成到我的 React 元素中。在此之前，我针对移动响应的 CSS 媒体查询运行良好。现在，当我使用 Chrome 的工具在移动屏幕尺寸甚至我自己的设备上查看我的应用程序时，我得到的 View 就像在桌面上一样。
看起来服务器正在呈现整个页面并假定桌面大小并且在它到达客户端时不会重新呈现。如果是这样，我如何告诉它用户在移动并使用那些 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;
}
}
感谢任何帮助!
最佳答案
之前，React 会自动在 <head> 中插入以下内容您的 SPA:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
一旦你搬到了SSR ，责任转移到开发人员自己添加这一点。没有它，当涉及到 @media 时，您会遇到一些非常意外的行为。查询断点。正如您在解决问题后发现的那样，这已得到解决 already .
关于css - NextJs SSR 无法识别移动设备的 CSS 媒体查询，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54701614/
25
4
0
我使用的是linux的windows子系统，安装了ubuntu，bash运行流畅。 我正在尝试使用make，似乎bash 无法识别gcc。尝试将其添加到 PATH，但没有任何改变。奇怪的是 - cmd
ImageMagick 已正确安装。 WAMP 的“PHP 扩展”菜单也显示带有勾选的 php_imagick。除了 Apache 和系统环境变量外，phpinfo() 没有显示任何 imagick
我是这么想的，因为上限是 2^n，并且考虑到它们都是有限机，n 状态 NFA 和具有 2^n 或更少状态的 DFA 的交集将是有效。 我错了吗？ 最佳答案 你是对的。 2^n 是一个上限，因此生成的
我有一个大型数据集，其中包含每日值，指示一年中的特定一天是否特别热(用 1 或 0 表示)。我的目标是识别 3 个或更多特别炎热的日子的序列，并创建一个包含每个日子的长度以及开始和结束日期的新数据集。
我有一个向量列表，每个向量看起来像这样 c("Japan", "USA", "country", "Japan", "source", "country", "UK", "source", "coun
是否有任何工具或方法可以识别静态定义数组中的缓冲区溢出(即 char[1234] 而不是 malloc(1234))？ 昨天我花了大部分时间来追踪崩溃和奇怪的行为，最终证明是由以下行引起的: // e
我一直在尝试通过导入制表符分隔的文件来手动创建 Snakemake 通配符，如下所示: dataset sample species frr PRJNA493818_GSE120639_SRP1628
我一直在尝试通过导入制表符分隔的文件来手动创建 Snakemake 通配符，如下所示: dataset sample species frr PRJNA493818_GSE120639_SRP1628
我想录下某人的声音，然后根据我获得的关于他/她声音的信息，如果那个人再次说话，我就能认出来!问题是我没有关于哪些统计数据(如频率)导致人声差异的信息，如果有人可以帮助我如何识别某人的声音？ 在研究过程
我希望我的程序能够识别用户何时按下“enter”并继续循环播放。但是我不知道如何使程序识别“输入”。尝试了两种方法: string enter; string ent = "\n"; dice d1;
我创建了这个带有一个参数(文件名)的 Bash 小脚本，该脚本应该根据文件的扩展名做出响应: #!/bin/bash fileFormat=${1} if [[ ${fileFormat} =~ [F
我正在寻找一种在 for 循环内迭代时识别 subview 对象的方法，我基本上通过执行 cell.contentView.subviews 从 UITableView 的 contentView 获
我正在尝试在 Swift 中使用 CallKit 来识别调用者。 我正在寻找一种通过发出 URL 请求来识别调用者的方法。 例如:+1-234-45-241 给我打电话，我希望它向 mydomain.
我将(相当古老的)插件称为“thickbox”，如下所述: 创建厚盒时，它包含基于查询的内容列表。 使用 JavaScript 或 jQuery，我希望能够访问 type 的值(在上面的示例中 t
我想编写一些可以接受某种输入并将其识别为方波、三角波或某种波形的代码。我还需要一些产生所述波的方法。 我确实有使用 C/C++ 的经验，但是，我不确定我将如何模拟所有这些。最终，我想将其转换为微 Co
我创建了一个 for 循环，用于在每个部分显示 8 个项目，但我试图在循环中识别某些项目。例如，我想识别前两项，然后是第五项和第六项，但我的识别技术似乎是正确的。 for (int i = 0; i
如何识别 UIStoryboard？ 该类具有创建和实例化的方法，但我没有看到带有类似name 的@property。例如 获取 Storyboard对象 + storyboardWithName:b
如何确定所运行的SQLServer2005的版本 要确定所运行的SQLServer2005的版本，请使用SQLServerManagementStudio连接到SQLServer2005，然后运行
这个问题在这里已经有了答案: How to check whether an object is a date? (26 个答案) 关闭2 年前。 我正在使用一个 npm 模块，它在错误时抛出一个空
我正在制作一个使用 ActivityRecognition API 在后台跟踪用户 Activity 的应用，如果用户在指定时间段(例如 1 小时)内停留在同一个地方，系统就会推送通知告诉用户去散步.
我是一名优秀的程序员,十分优秀！