Svelte：CSS 在动态路由页面上没有响应答案

【问题标题】：Svelte: CSS not responsive on dynamic route pagesSvelte：CSS 在动态路由页面上没有响应
【发布时间】：2022-01-04 18:25:19
【问题描述】：

我有一个问题，我几乎可以肯定是因为我构建页面的方式，而不仅仅是 CSS 问题。我正在为我的网站使用 Tailwind。对于我的 Sveltekit 博客，我想要xyz.com/projects/some-project URL 结构，因此我在routes 中创建了一个名为projects 的文件夹。在里面我有两个文件，index.svelte 和 [project].svelte。索引应该包含所有帖子的列表，并且任何项目都应该在[project] 创建。所有这些工作正常，但动态创建的页面有一些奇怪的布局问题，导致它没有响应。例如，您可以看到此页面的格式有多么奇怪。

You can visit this page 自己看看吧。 My code for this is here.

我在某处读到我应该在创建动态路由时使用__layout.reset.svelte 或类似的东西？有什么问题吗？

为什么我的断点和响应式 CSS 不起作用？

我认为这是 Sveltekit 问题的原因是因为动态页面是唯一发生这种情况的页面，所以我假设我的设置方式有问题。

【问题讨论】：

标签： html css responsive-design svelte sveltekit

【解决方案1】：

您的/src/app.html 的<head> 部分是问题所在。你的是：

<head>
    %svelte.head%
</head>

缺少一个关键部分，<meta name="viewport" content="width=device-width, initial-scale=1" /> 标记，这对于移动响应至关重要。

这通常出现在默认的 SvelteKit 项目中：

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    %svelte.head%
</head>

我注意到您从 custom template 开始您的项目，并且确实该模板的 /scr/app.html 骨架缺少上述信息。

这是您在使用此类模板时必须注意的事项 - 它们如何偏离标准安装以及对您的影响。我的建议是，从默认开始，有意识地添加片段，充分了解增量更改并完全控制您的源代码。

【讨论】：

非常感谢您的回答，我没想到是这个。这是我的第一个 Svelte 项目，所以我想我会以此为基础，但我会听取您的建议并尝试从标准开始。再次感谢您！