grid布局需用auto-fit与minmax(300px,1fr)保卡片最小宽度，gap用clamp响应式，图片懒加载+https外链+referrerpolicy防泄露，字体和容器比例适配多端，动效按设备能力条件触发。
用 HTML + CSS 做 UI 设计师作品集，核心不是炫技，而是让项目图在任意设备上清晰可读、加载不卡、点击路径明确——grid 是目前最稳的布局选择，但写错一行 grid-template-columns 就会让整页在手机上崩成文字堆。
怎么写 grid-template-columns 才不挤成一团
新手常写 grid-template-columns: repeat(3, 1fr)，结果小屏下卡片宽度跌破 280px，图片被拉扁、标题换行错乱、hover 区域消失。这不是浏览器问题，是逻辑硬伤。
-
auto-fit替代auto-fill：避免空列占位，尤其在项目数非 3 的倍数时 - 用
minmax(300px, 1fr)锁住单卡最小宽度，300px 是移动端阅读舒适下限（含 padding） - 别混用
fr和px，比如repeat(auto-fit, minmax(300px, 2fr))会破坏弹性分配 - 高度差异大时加
grid-auto-rows: minmax(200px, auto)，防错行
图片懒加载 + 外链安全必须同时做
作品集图多，不加 loading="lazy" 首屏加载可能超 3s；但只加 lazy 不管外链，又容易遇到防盗链 404 或 Referer 泄露。
- 所有
<img>必须带loading="lazy"，现代浏览器原生支持，无 JS 依赖 - 外链图强制用 HTTPS 完整地址，如
https://cdn.example.com/project-a.jpg，禁用 // 开头或相对路径 - 加
referrerpolicy="no-referrer"防止来源页 URL 泄露到第三方 CDN 日志 -
alt写具体描述，例如alt="电商后台 Dashboard 界面，含订单筛选、实时数据看板与权限分级入口"，不是 “项目1” - 关键封面图建议本地存，路径统一为
./assets/projects/xxx.jpg，避免 CDN 故障导致空白卡片
gap 为什么不能写死 1rem
写死 gap: 1rem 在 iPhone 上视觉间隙过大（≈16px），在 4K 屏上又过小（≈12px），节奏全乱。这不是像素误差，是视口缩放失配。
- 用
clamp(0.75rem, 2.5vw, 1.25rem)：小屏保底、中屏随宽度线性缩放、大屏封顶 - 别用
margin模拟 gap，最后一行右/下留白会不对齐，且响应式断点失效 - 如果用了
grid-auto-flow: dense，gap 仍生效，但需额外测试重排后卡片间距是否一致
字体、行高、裁剪比例这些细节才是专业分水岭
很多人调完 grid 就以为完工，其实真正影响“是否可信”的，是字体在 375px 宽度下是否仍可读、项目图是否统一按 4:3 或 16:9 裁剪、hover 动效是否在触屏设备上被误触发。
- 正文用
font-size: clamp(0.875rem, 2.5vw, 1rem)，比固定值更适应不同密度屏 - 图片容器设
aspect-ratio: 4/3或16/9，配合object-fit: cover，避免拉伸变形 - hover 动效加
@media (hover: hover) and (pointer: fine)媒体查询，触屏设备跳过 - 深色模式适配只需加
prefers-color-scheme查询，但作品图本身不要依赖背景色反差来表达信息
真正难的不是写出一个能跑的页面，而是让访客在 0.8 秒内看清“这是什么项目、解决了什么问题、用了什么设计方法”——所有技术选择，最终都要服务于这个瞬间的信息传达效率。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
