个人作品集网站设计：简洁结构解析指南

• 图片必须加 alt 属性，哪怕只是 “作品：天气应用界面”，否则屏幕阅读器无法识别，也影响 SEO
• 避免在 上硬写 width/height，用 CSS 的 aspect-ratio: 4/3 + object-fit: cover 保证缩略图不变形
• 技术标签不要用
  ，改用 ，语义更准，也方便后期加 hover 效果

响应式断点只设两个就足够

手机竖屏（max-width: 480px）和桌面（min-width: 769px）之间留白，不额外处理平板。手机端作品网格设为单列，桌面端用 display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) —— 这样在 1280px 宽度下自动铺开 4 列，1920px 下变成 6 列，不用手算像素。

• 字体大小用 rem，根元素 font-size: 100%（即浏览器默认 16px），标题用 1.5rem，正文用 1rem，缩放自然
• 禁用 user-scalable=no，否则 iOS 用户双指缩放会失效，无障碍体验直接降级
• 所有交互伪类（:hover、:focus）必须同时存在，比如按钮悬停变色，也要确保键盘 Tab 切入时有清晰焦点框

部署前必须检查的三个冷门但致命项

很多人测完 Chrome 就上传，结果在 Safari 里图片错位、在 Edge 里网格塌陷。真正卡住上线的往往是这些细节：

• 必须在 里，漏掉这行，手机端页面会按 980px 渲染，文字小得看不见
• CSS 中避免使用 gap 配合 float 布局（已淘汰），如果用了 grid 或 flex，确认是否加了 -webkit- 前缀（Safari 15.4 以下需要 -webkit-gap）
• 所有外部资源（比如 Google Fonts）用 https:// 协议，HTTP 资源在 HTTPS 页面会被现代浏览器拦截，图片显示为空白且控制台报 Mixed Content 错误

最省事的方式：写完后用 http-server 本地起服务（npx http-server），再拿真机 Safari / Chrome 打开 localhost:8080 看效果。模拟器容易骗人，真机滑动惯性、字体渲染、图片解码都不同。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~