示例成品 · 平台演示，按左边这组点选真跑出来的
直接给你一个做好的手机适配版记录表。复制下面代码，保存成 **宝宝喂养记录.html**，用手机浏览器打开就能用。数据存在手机本地，下次打开还在。
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>宝宝喂养记录表</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<style>
* { box-sizing: border-box; }
body {
font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
background: #f5f5f5;
margin: 0;
padding: 10px;
color: #222;
}
.page { max-width: 520px; margin: 0 auto; }
h1 { font-size: 20px; text-align: center; }
h2 { font-size: 17px; margin: 8px 0; }
.card {
background: #fff;
border-radius: 12px;
padding: 14px;
margin-bottom: 12px;
box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
label { font-size: 14px; color: #555; display: block; margin: 8px 0 4px; }
input, textarea {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 8px;
}
textarea { min-height: 60px; }
.row { display: flex; gap: 8px; }
.row > div { flex: 1; }
.feed-row {
display: flex;
gap: 6px;
margin-bottom: 6px;
align-items: center;
}
.feed-row input[type="time"] { width: 90px; flex: none; }
.feed-row input[type="number"] { flex: 1; }
.spit {
display: flex;
align-items: center;
gap: 4px;
font-size: 13px;
white-space: nowrap;
margin: 0;
color: #333;
}
.spit input { width: auto; margin: 0; }
.btn {
background: #2a7de1;
color: #fff;
border: none;
padding: 12px;
border-radius: 10px;
font-size: 16px;
width: 100%;
margin-top: 12px;
}
.btn-small {
background: #eee;
color: #333;
border: none;
padding: 6px 10px;
border-radius: 6px;
font-size: 13px;
}
.del-btn {
background: #c62828;
color: #fff;
border: none;
border-radius: 6px;
padding: 5px 8px;
font-size: 12px;
}
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; }
th, td { border: 1px solid #ddd; padding: 6px; text-align: center; }
th { background: #f0f7ff; }
.red { background: #ffe5e5 !important; color: #c62828; font-weight: bold; }
.sub { font-size: 11px; color: #555; }
.note { font-size: 12px; color: #888; margin-top: 6px; }
.msg { color: #2e7d32; font-size: 14px; text-align: center; padding: 6px; }
.chart-box { height: 220px; position: relative; margin-top: 10px; }
</style>
</head>
<body>
<div class="page">
<h1>🍼 宝宝喂养记录表</h1>
<div class="card" id="summaryCard"></div>
<div class="card">
<h2>今天记一笔</h2>
<label>日期</label>
<input id="date" type="date">
<div class="row">
<div>
<label>体重（kg）</label>
<input id="weight" type="number" step="0.01" value="4.1">
</div>
<div>
<label>体脂率%（选填）</label>
<input id="bodyFat" type="number" step="0.1">
</div>
</div>
<label>喂奶记录</label>
<div id="feedList"></div>
<button type="button" id="addFeedBtn" class="btn-small">+ 加一顿</button>
<div id="formTotal" class="note"></div>
<label>大便次数</label>
<input id="stool" type="number" min="0" step="1">
<label>备注</label>
<textarea id="note" placeholder=
点左边「开工 · 直接出成品」，出一份你自己的版本（文字免费）