移动端优先：个人网站适配手机的几条经验

超过一半的访客来自手机，个人网站不做好移动端适配，等于把一半人挡在门外。以下是这次建站用到的几条经验。

1. 先写桌面，再用媒体查询收窄

基础样式按桌面写，然后在断点处逐步"降级"：

/* 桌面：三列网格 */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); }

/* 平板：两列 */
@media (max-width: 860px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 手机：单列 */
@media (max-width: 520px) {
  .card-grid { grid-template-columns: 1fr; }
}

2. 导航：汉堡菜单

桌面导航横向排列，768px 以下隐藏、换成汉堡按钮：

.nav-toggle { display: none; }

@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .nav-links { display: none; }          /* 默认收起 */
  .nav-links.open { display: flex; }     /* 点击展开 */
}

JS 里只需切换 open 类，顺带把按钮三条横线变成叉号。

3. 触控目标 ≥ 44px

苹果和谷歌都建议可点击区域不小于 44×44px。按钮、输入框都加了 min-height: 44px，防止手指点不准。

4. 双栏工具在手机上改上下堆叠

Markdown 预览工具桌面是左右分栏，手机上改成上下：

.tool-md { grid-template-columns: 1fr 1fr; }  /* 桌面双栏 */

@media (max-width: 768px) {
  .tool-md { grid-template-columns: 1fr; }    /* 手机单栏 */
}

5. 别忘了这三件事

<meta name="viewport" content="width=device-width, initial-scale=1.0">——没有它一切白搭
表单按钮在窄屏下 width: 100%，避免被键盘顶得歪七扭八
聊天窗口这类"容器内滚动"的区域，-webkit-overflow-scrolling: touch 让滚动更跟手

总结：响应式不是"少做"桌面功能，而是为拇指和窄屏重新排版。