三、项目开发规范
输入“/”快速插入内容
🛠️三、项目开发规范
三、项目开发规范
用户2187用户21872025年5月12日修改
样式
响应式
•
本就不明显，且尺寸/位移不应该受显示屏大小影响的样式允许使用 px 单位，比如圆角半径 border-radius、阴影 box-shadow 和关键帧动画里的位移 translate。
•
除此之外的样式都使用 rem 单位而不是 px 单位。你可以认为 1rem = 10px。
•
多使用 flex 与 grid 布局，尽量使用 auto、% 以及 fr、vh、vw 等相对单位。
•
支持大部分 PC 显示屏，不支持手机。相关代码集中在 _breakpoints.scss。
风格
•
首页、404 页和“作者信息”融合点描、蚀刻和铜版画风格，人物半写实，主要使用米色和黑色，辅以主色点缀。
图-3.1_参谋页面风格
◦
皮肤和布料用小点/短划线堆出来，远看像柔和阴影，近看全是颗粒。
◦
背景略像羊皮纸。
◦
使用战术地图、战术符号等作为背景装饰。
•
人格头像融合数字厚涂与写实油画风格。
图-3.2_人格肖像风格
◦
方形笔刷，大色块。
◦
单光源、大面积暗背景，带有轻微雕塑感，人物轮廓从黑场里“浮”出来。
◦
可以让魂兮归乡提供头像。
•
一切其他组件和页面使用现代简约风格，让用户感觉简单、干净、稳重。禁止写实或拟物。
字体
•
若无特殊情况，从 _variables.scss 中的 1.333 - Perfect Fourth 和 1.500 - Perfect Fifth 中选择字号。
◦
默认 1.6rem（16px），你通常没有必要手动设置 font-size。
◦
对于次要提示消息（比如，Field 校验不通过时下方显示的红色提示文本），设置 font-size: 1.2rem。
•
默认字重为 500，对于重点信息（比如按钮上的文本），可以设置 font-weight: 700。
•
请勿使用衬线体。
•
间距也可以从 _variables.scss 中的 1.333 - Perfect Fourth 和 1.500 - Perfect Fifth 中选（无强制要求）。
•
强烈建议下图红色框位置的标题统一使用 <h4>（font-size: 3.79rem; font-weight: 700;）。