CSS 单位
CSS Units
样式与 CSS也叫：长度单位、px 与 rem、视口单位
一句话：表示长度的单位，常用的有固定像素 px、跟随字号的 rem 和 em、按窗口比例的 vw、vh，以及百分比。
详细解释
常用单位分两类。绝对单位 px：大小固定，边框、阴影、小图标常用。相对单位：rem 相对根元素字号（默认 16px，所以 1rem = 16px），适合字号和间距，用户调大浏览器字号时会一起放大；em 相对当前字号，嵌套多层时会层层叠加；% 相对父元素；vw、vh 相对浏览器窗口，1vw 是窗口宽度的 1%。
手机上全屏高度写 100vh 可能被浏览器地址栏挡住一截，可以改用 100dvh，它会随地址栏的显示和隐藏调整。
常见组合：字号和间距用 rem（Tailwind 的默认刻度就是 rem），边框用 px，布局宽度用百分比或 fr，全屏区块用 dvh。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
请把页面里写死的字号和间距从 px 改成 rem（以 16px 为 1rem），边框保持 1px；手机端首屏横幅高度用 100dvh 而不是 100vh，避免被地址栏挡住；主内容区宽度 100%，最大宽度 1200px 并水平居中。