-
使用auto-fit与minmax可创建自适应多列布局：.grid-container设置display:grid，grid-template-columns:repeat(auto-fit,minmax(200px,1fr))实现列宽最小200px、最大均分，空间不足时自动换行；适用于卡片、图库等场景，小屏单列、中屏多列、大屏更多列，无需媒体查询；优化建议设minmax最小值为250px避免过窄，配合gap间距，确保各设备良好排版。
-
使用CSSGrid可轻松实现多列等高布局。1.设置父容器display:grid和grid-template-columns定义列宽，子元素自动等高；2.通过align-items控制对齐方式，默认stretch保持等高，start则取消，center仍等高；3.结合repeat(auto-fit,minmax(250px,1fr))实现响应式等高列，无需JS或复杂技巧，代码简洁且易维护。
-
点击“查看更多”无反应，需检查是否漏写event.preventDefault()；数据为空时按钮仍显示，应优先依据后端has_more等分页字段而非仅判断data.length。
-
iOS无法对HTML5video截图的根本原因是Safari安全策略限制video内容不进入Canvas可读取图层；需满足playsinline、muted等属性组合，用户手势触发播放，并在playing事件中延时调用drawImage。
-
本文详解如何规避“不能在条件或函数中调用Hook”的限制，通过enabled:false+refetch()模式，在登录成功后按需触发自定义数据获取Hook，确保逻辑合规、数据可控且可等待。
-
preparation阶段是Node.js事件循环中poll阶段前的内部准备步骤，其主要作用是为I/O轮询做前置处理。1.它检查并调整libuv内部状态，确保文件描述符和数据结构正确；2.计算poll阶段的阻塞时间，依据定时器和setImmediate队列决定等待时长；3.处理内部非用户层面的事件或状态转换，以优化poll阶段执行效率。该阶段不执行用户代码，因此在日常开发中几乎不可见，且不在官方文档中详细说明。它紧密服务于poll阶段，影响其超时设置，并在整个事件循环流程中起到承上启下的作用，确保各阶段高
-
LoadingWrapper组件通过插槽封装加载状态，支持default/loading/empty/error具名插槽，结合useAsyncData组合式函数统一管理异步逻辑，避免重复代码与副作用误触发。
-
表单验证的核心目标是及时友好提示用户并保障数据有效性，前端验证提升体验但不能替代后端校验；需结合原生API、自定义样式与提示、防误提交机制及前后端职责协同。
-
应使用requestAnimationFrame节流并在scroll回调中实时读取window.scrollY，避免直接高频操作；首次读取需等待DOMContentLoaded或load事件，移动端需同时监听touchmove并设passive:false，只读场景用passive:true提升性能。
-
JavaScript中函数是一等公民，可赋值、传参、返回和参与表达式，支撑回调、事件驱动与函数式编程等核心范式。
-
row-gap和column-gap仅在display:grid或inline-grid容器上生效；不支持百分比单位；gap简写会完全覆盖单独声明的row-gap/column-gap；Firefox中subgrid对gap支持不完整。
-
lch()和oklch()目前可用但需看浏览器支持：lch()自Safari16.4+/Chrome111+/Firefox117+起支持，oklch()需Chrome112+/Firefox121+/Safari17.4+；不支持时降级至前一条声明，常见错误是漏百分号或误解L范围（0%–100%）；oklch()基于感知更均匀的OKLab空间，适合深色模式、UI色阶与无障碍对比度控制，但兼容性较弱且依赖显示设备色域。
-
现代标准做法是使用WebCryptoAPI，它基于硬件加速和系统级随机数生成器，提供密钥管理、加解密操作和算法绑定三大核心功能，支持AES-GCM对称加密和RSA-OAEP公钥加密，强调密钥安全与运行时兼容性检测。
-
实时协作编辑的核心难点是多用户异步修改同一数据时如何保证最终一致性且不丢失操作；操作转换（OT）通过动态变换操作位置、合并与逆操作等机制解决该问题，但实现复杂，CRDT是其现代替代方案。
-
BEM是约束CSS作用域边界的协作协议，通过块（Block）、元素（Element）、修饰符（Modifier）三部分及双下划线__、双短横--命名规范，确保类名可反推DOM结构与意图，明确组件边界与职责。
