需启用百分比标注模式、设置手动参考层、确保设计稿为psd/sketch/xd格式且具两级以上嵌套结构、适配flex/grid容器属性、导出时勾选“包含百分比标注值”选项。
如果您在使用 PxCook 对响应式设计稿进行标注时，发现尺寸值无法随屏幕变化而动态显示百分比自适应值，则可能是未启用百分比标注模式或设计稿结构不满足自动计算条件。以下是实现弹性布局百分比自适应标注的具体操作方法：
一、启用百分比标注模式
百分比标注模式是 PxCook 实现响应式布局标注的核心功能，开启后可将元素尺寸、间距等属性自动转换为相对于参考层的百分比值，适用于流式布局与弹性容器场景。
1、确保当前处于开发模式（非设计模式）。
2、在顶部工具栏中找到 百分比标注开关 图标（通常为带有 % 符号的按钮），点击将其切换为开启状态。
3、观察画布中已选中图层的标注数值是否由 px 单位变为 % 单位；若仍显示像素值，请检查参考层设置是否生效。
二、设置手动参考层
默认情况下，PxCook 会自动选取两个标注点之间的父级图层作为参考层，但该逻辑在复杂嵌套或无明确容器结构时可能失效。手动指定参考层可确保百分比计算基准准确统一。
1、在画布中右键单击您希望设为基准的容器图层（例如整个画板、Section 或 Flex 容器）。
2、在弹出菜单中选择 “设为百分比标注参考层” 选项。
3、确认该图层边缘出现高亮边框，并且其他子元素标注值实时更新为相对于该图层的百分比。
4、注意：同一画板中仅允许存在一个手动设置的参考层；再次设置将自动清除前一个。
三、验证设计稿格式与图层结构
PxCook 的百分比自动标注依赖于源文件中的可解析图层关系，若设计稿为扁平化位图或缺少层级信息，则无法提取相对位置与尺寸数据，导致功能不可用。
1、确认设计稿格式为 PSD、Sketch 或 XD，而非 JPG、PNG 等栅格图像。
2、打开图层面板，检查是否存在至少两级图层嵌套（如：画板 > 容器组 > 按钮），确保有明确的父子容器关系。
3、避免将所有内容置于单一图层组内且未命名；建议对关键容器添加语义化名称（如 “Header-Flex”、“Grid-Container”）以提升识别稳定性。
四、处理 Flexbox 与 Grid 容器的特殊标注
当设计稿中使用 CSS Flexbox 或 Grid 布局时，PxCook 需结合容器属性推算子项占比。此时需配合手动参考层与元素对齐方式设定，才能正确反映弹性分配比例。
1、对 Flex 容器启用参考层后，选中其子元素，查看标注中是否出现 flex-basis、flex-grow 或 justify-content 相关提示（部分版本会在标注气泡中显示）。
2、对于 Grid 布局，确保网格容器具备明确列宽定义（如 repeat(4, 1fr) 或 25% 列），并在 PxCook 中右键该容器设置为参考层。
3、若子项宽度显示为 “auto”，说明其未被赋予固定或弹性宽度属性，此时百分比值将无法计算，需返回设计工具补充布局约束。
五、导出含百分比信息的标注数据
完成标注配置后，需通过特定导出路径保留百分比单位信息，否则开发者接收到的仍可能是原始像素值，失去响应式意义。
1、点击右上角 “导出标注” 按钮，选择 JSON 或 HTML 标注包格式。
2、在导出设置弹窗中勾选 “包含百分比标注值” 和 “保留参考层元数据” 选项。
3、下载完成后，打开生成的 HTML 文件，检查各元素标注区域是否同时显示 px 与 % 双值，或仅显示 % 值（取决于设置偏好）。
