Hacktoberfest 2026:维护者为十月标记出来的 issue,仍然开放、适合新手。 浏览 Hacktoberfest issue

fix: Inspect panel styles break when host page sets a custom html font-size (rem-based units)

未关闭 适合新手
#973 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

  • #1052 来自 @waterWang —— 已关闭,未合并

评估

难度
2/5
预计耗时
1-3 小时
新手友好度
72/100
Issue 类型
缺陷
描述清晰度
基本清楚
活跃度
冷清
技术栈
css, typescript
领域
frontend

调研方向

从 packages/devtools/src/webcomponents/.generated/css.ts 开始,检查 inspect panel 使用的基于 rem 的尺寸。使用 html font-size 为 41.4px 的宿主页面复现该面板,然后验证更新 CSS units 后,它与默认字体大小下的渲染保持一致。

由索引模型根据 Issue 内容生成。

描述

bug
🐛 The bug

When a host application uses postcss-pxtorem (or similar tools) to set a non-default font-size on for mobile responsive layouts (e.g. font-size: 41.4px instead of the browser default 16px), the nuxt-devtools-inspect-panel web component renders incorrectly.

The root cause is that the generated CSS in packages/devtools/src/webcomponents/.generated/css.ts uses rem units.
Since rem is relative to the host page's font-size — not the web component's own root — all rem-based
dimensions in the inspect panel scale incorrectly.

🛠️ To reproduce

[]

🌈 Expected behavior

The inspect panel should render consistently regardless of the host page's root font-size.

ℹ️ Additional context

Replace rem with px (or em scoped to the component's own font-size) in the web component's CSS, since web components don't inherit a predictable rem baseline from the host page.

主要语言
TypeScript
星标
3.3k
派生
217
平均合并
20 小时 18 分钟
30 天内合并 PR
17

环境准备

  • 没有 Dockerfile 或 Docker Compose 文件
  • 没有 Pull Request 模板
  • 阅读贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

nuxt/devtools 的其他 Issue

查看 nuxt/devtools 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。