2026.8.17 星期一一.CSS自定义属性定义全局变量颜色而不是给每个写死。颜色统一集中管理修改主题色只改root一处不需要全局搜索替换颜色值方便做深色 / 浅色主题切换。:root { --green: hsl(75, 94%, 57%); --white: hsl(0, 0%, 100%); --grey-700: hsl(0, 0%, 20%); --grey-800: hsl(0, 0%, 12%); --grey-900: hsl(0, 0%, 8%); }:root代表文档根元素在这里定义的变量是全局 CSS 变量。变量命名以--开头使用时用var(--变量名)。如下/* 使用示例 */ .btn { background-color: var(--green); color: var(--white); }二.min-height和min-width1 height vs min‑height高度height:100vh强制固定高度等于视口高度。如果页面内容很多内容会溢出盒子发生裁切内容被挡住看不到。min‑height:100vh盒子最少要有视口那么高内容多就自动撑开变大✅页面布局首选。2.卡片布局width:100% max‑width.card { width: 100%; /* 手机占满可用宽度 */ max-width: 380px; /* 桌面最大不超过380px不会无限拉宽 */ /* 不要写 width:380px; 手机下直接溢出屏幕出横向滚动条 */ }手机小屏幕width:100%卡片占满父容器宽度。电脑大屏幕卡片宽度涨到380px就不再变大保持舒适阅读宽度。3.移动端桌面端完整适配①页面外层bodybody { /* 页面最少占满屏幕高度内容多自动变长 */ min-height: 100vh; margin:0; /* 小屏幕四周留白防止贴边 */ padding: 24px; display:flex; justify-content:center; align-items:center; }②中间卡片.card { width: 100%; max-width: 380px; /* 桌面端最大宽度 */ /* 不要写 height内容多少高度就多少 */ padding: 2rem; border-radius:12px; }
2026.8.17 星期一一.CSS自定义属性定义全局变量颜色而不是给每个写死。颜色统一集中管理修改主题色只改root一处不需要全局搜索替换颜色值方便做深色 / 浅色主题切换。:root { --green: hsl(75, 94%, 57%); --white: hsl(0, 0%, 100%); --grey-700: hsl(0, 0%, 20%); --grey-800: hsl(0, 0%, 12%); --grey-900: hsl(0, 0%, 8%); }:root代表文档根元素在这里定义的变量是全局 CSS 变量。变量命名以--开头使用时用var(--变量名)。如下/* 使用示例 */ .btn { background-color: var(--green); color: var(--white); }二.min-height和min-width1 height vs min‑height高度height:100vh强制固定高度等于视口高度。如果页面内容很多内容会溢出盒子发生裁切内容被挡住看不到。min‑height:100vh盒子最少要有视口那么高内容多就自动撑开变大✅页面布局首选。2.卡片布局width:100% max‑width.card { width: 100%; /* 手机占满可用宽度 */ max-width: 380px; /* 桌面最大不超过380px不会无限拉宽 */ /* 不要写 width:380px; 手机下直接溢出屏幕出横向滚动条 */ }手机小屏幕width:100%卡片占满父容器宽度。电脑大屏幕卡片宽度涨到380px就不再变大保持舒适阅读宽度。3.移动端桌面端完整适配①页面外层bodybody { /* 页面最少占满屏幕高度内容多自动变长 */ min-height: 100vh; margin:0; /* 小屏幕四周留白防止贴边 */ padding: 24px; display:flex; justify-content:center; align-items:center; }②中间卡片.card { width: 100%; max-width: 380px; /* 桌面端最大宽度 */ /* 不要写 height内容多少高度就多少 */ padding: 2rem; border-radius:12px; }
