出现的问题1.字体引用font-face它是在告诉浏览器这些字体文件在哪里、叫什么名字。这样你就能用 font-family: Outfit 这样的名字来引用本地字体文件了。font‑face的结构是固定的你只需要填 3 个东西font‑family:给字体起的名字随便起但要和你后面font‑family用的一致src: url(文件路径)字体文件在哪font‑weight:这个文件对应多少字重而在style-guide.md中已经给出了字体的路径和字重字重数值文件名常见关键词中文俗称100Thin / Light细体400Regular常规500Medium中等600SemiBold半粗700Bold粗体800/900ExtraBold / Black特粗所以我们就可以得到字体文件路径需要的字重Young Serifassets/fonts/young-serif/YoungSerif-Regular.ttf400Outfitassets/fonts/outfit/static/Outfit-Regular.ttf400Outfitassets/fonts/outfit/static/Outfit-SemiBold.ttf600Outfitassets/fonts/outfit/static/Outfit-Bold.ttf7002.移动端适配max-width: 736px; width: 100%;所以卡片宽度会跟着屏幕收缩不会横向溢出。.recipe-page-main {max-width: 736px;width: 100%;display: flex;flex-direction: column;gap: 1.5rem;padding: 40px;background-color: var(--White);border-radius: 20px;}但有两个明显问题还没有适配问题 1移动端 padding 太大桌面版卡片是悬浮在 Stone100 背景上、带圆角需要padding: 40px。但手机上设计稿是卡片铺满全屏、无圆角、无内边距图片直接到边缘。你现在的 40px padding 在手机上会让内容很挤、还留出绿色边缝。问题 2卡片未铺满移动端宽度body有padding: 50px 20px加上卡片 padding 40px在手机上内容区非常窄和 mobile-design 的通栏效果不符。解决办法加一个移动端媒体查询在/style前.attribution a之后添加以下代码/* 移动端适配小于 600px 时卡片铺满、去掉圆角和多余内边距 */media (max-width: 600px) {body {padding: 0;}.recipe-page-main {border-radius: 0;padding: 30px 30px;}.recipe-page-main img {width: calc(100% 60px); /* 让图片顶到屏幕左右边缘 */margin-left: -30px;border-radius: 0;max-height: none;}h1 {font-size: 2rem; /* 标题适当缩小 */}.nutrition td:first-child,.nutrition td:last-child {padding-left: 20px;padding-right: 20px;}}3.表格问题table整个表格的外壳标签tbody表格主体内容区域放数据行区分表头、表尾tr→ table‑row代表一行每一组就是表格里的一整行td→ table‑data代表单元格一行里面的一小格table tbody tr tdCalories/td td277kcal/td /tr tr tdCarbs/td td0g/td /tr tr tdProtein/td td20g/td /tr tr tdFat/td td22g/td /tr /tbody /table