Svelte：CSS 对动态路由页面没有响应

Question

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

You can visit this page and see it for yourself. My code for this is here.

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

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

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

Answer 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：CSS 对动态路由页面没有响应

Svelte: CSS not responsive on dynamic route pages

html

css

responsive-design

svelte

sveltekit