nes.css 依赖固定前缀+语义class组合（如.nes-btn.is-primary）、必需容器（.nes-container）、press start 2p字体、viewport meta及按需引入，任何错用或强行适配均破坏像素风效果。
nes.css 的 class 命名规则和基础用法
nes.css 不是靠 CSS 变量或 JS 控制主题，它靠的是固定前缀 + 语义 class 组合，比如 .nes-container、.is-rounded、.is-primary。写错 class 名或漏掉基础容器，按钮/卡片就只是“看起来像”，实际没边框锯齿、没像素风阴影。
-
.nes-btn必须和.is-primary/.is-success等状态类一起用，单独写.nes-btn没颜色也没 hover 效果 - 按钮文字必须用
<span></span>包裹（如<button class="nes-btn is-primary"><span>Click</span></button>），否则文字会偏上、不居中——这是 NES 字体基线导致的，不是 bug -
.nes-container是所有卡片/面板的必需父容器，里面再加.with-title或.is-dark才生效；直接给 div 加.is-dark无效
字体加载失败导致界面“变胖”或文字错位
nes.css 依赖 Press Start 2P 这个免费像素字体，但 CDN 上的字体文件偶尔 404，或者本地未正确引入，浏览器就会回退到系统默认等宽字体（如 Courier），字宽变大、行高变松，整个 UI 就“膨胀”了，按钮文字溢出、卡片高度塌陷。
- 检查控制台是否报
Failed to load resource: the server responded with a status of 404 ()，路径含press-start-2p - 推荐用 Google Fonts 引入：在
加<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">，然后确保 CSS 中font-family正确声明（nes.css 默认已写好，不用改） - 如果部署到内网或离线环境，务必把
press-start-2p.woff2下载下来，通过@font-face本地加载，CDN 不可靠
响应式失效：手机上看全是放大模糊的像素块
nes.css 默认不包含媒体查询，它的设计逻辑就是“固定像素尺寸 + 禁止缩放”，所以直接在移动端打开，浏览器会强制缩放整个 viewport，结果就是锯齿变糊、按钮点不准。
- 必须手动加 viewport meta：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">，少一个参数都可能触发缩放 - 别用
rem或%调整 nes 元素大小——所有.nes-*类内部用的是px，强行改会破坏像素对齐，比如.nes-btn高度是 32px，设成height: 2rem在不同设备上就不准了 - 真要适配小屏？只建议用
@media包一层容器做缩放（如transform: scale(0.75)），并配合transform-origin: top left，别动 nes.css 本身
和现代框架（React/Vue）混用时的 class 冲突
nes.css 的 class 名太“直白”，像 .title、.container、.icon 极易和组件库或项目已有样式冲突，尤其用了 Tailwind 或 Bootstrap 后，.container 可能被覆盖成 1200px 宽度，直接撑爆 nes 卡片。
立即学习“前端免费学习笔记（深入）”；
- 不要全局引入 nes.css，改用按需：只 import 你真正用到的模块，比如 React 中
import 'nes.css/css/nes.min.css';改成import 'nes.css/css/nes-core.min.css';（核心）+import 'nes.css/css/nes-buttons.min.css'; - Vue 单文件组件里，把 nes class 放在最外层 wrapper 上，内部用 scoped style，避免污染子元素
- 遇到冲突 class（比如两个框架都定义了
.icon），优先重命名你自己的 class，而不是覆盖 nes.css —— 它的像素计算很精密，随便改margin或line-height会导致文字悬空或图标错位
nes.css 的“复古感”全靠像素对齐和固定尺寸堆出来，任何试图“灵活适配”的操作，比如 flex 布局塞进 .nes-container、用 CSS transform 动画按钮，大概率会打破这种脆弱平衡。它适合做 landing page、游戏介绍页、彩蛋页面，不适合当主框架天天迭代。
