-
screen对象是浏览器全局对象，用于获取设备屏幕信息；screen.width/height返回逻辑分辨率，screen.availWidth/availHeight返回扣除系统UI后的可用区域；其值固定不随窗口变化，适合统计分析而非响应式布局。
-
HTTP/2本身不直接优化Vue组件加载逻辑，但通过多路复用、HPACK压缩和TLS加速，显著提升JS/CSS/图片等静态资源并行加载效率；需前端合理拆分chunk+preload提示，后端启用HTTP/2并禁用ServerPush、改用103EarlyHints，配合Brotli压缩与强缓存策略。
-
使用::before伪元素结合content属性可高效添加图标标记，常用于按钮、链接等场景。通过content插入Unicode字符或字体图标（如FontAwesome），配合margin、vertical-align等属性优化布局与样式，实现无需额外HTML标签的轻量级装饰效果。注意仅用于非关键性视觉内容，确保可访问性与兼容性。
-
gap在Grid中失效最常见原因是父容器未设display:grid或inline-grid；子元素浮动或绝对定位会脱离网格流导致gap无效；单行列网格中gap可能不可见；与margin叠加造成双倍留白；IE完全不支持需用@supports降级。
-
本文介绍如何利用window.scrollY实现基于滚动距离的元素显隐控制，支持多元素按区间精准切换，并提供可扩展的数据驱动方案与简洁可靠的原始实现。
-
本文介绍如何根据导航栏是否启用navbar-fixed类，动态为.title-img元素添加或移除margin-top:20%样式，通过简洁可靠的JavaScript检测与DOM操作实现响应式布局适配。
-
JavaScript操作二进制数据主要依靠ArrayBuffer及其视图（如Uint8Array、DataView）进行内存级精细控制，而Blob用于不可变的类文件二进制数据，适用于网络请求、文件读写和媒体操作；二者定位不同，ArrayBuffer支持同步随机访问，Blob侧重流式处理与浏览器API集成，可相互转换。
-
color-mix()在旧浏览器中不报错而是静默失败，需用@supports检测并提供静态色值fallback。
-
使用标准<ahref>标签添加链接，确保URL以https://开头，避免JavaScript；添加target="_blank"可尝试新窗口打开，但部分客户端如Gmail会忽略；应使用有意义的锚文本并配合内联CSS优化样式，最后在多平台测试验证链接有效性。
-
将移动和旋转合并到同一个transform中，通过单一@keyframes动画控制，可确保CSS元素的平移与旋转完全同步。示例：使用@keyframesmoveAndRotate定义从translateX(0)rotate(0deg)到translateX(200px)rotate(360deg)的动画，并应用于元素；若需调整旋转中心，可设置transform-origin为center或指定坐标；避免同时使用多个animation属性（如slide和spin），以防因渲染差异导致不同步；如需分阶段效果，
-
该用border而非outline；border需同时指定width、style、color三参数，可用方向性属性如border-top单独设置某边，border-radius使边框自身变圆，深色模式下需配合prefers-color-scheme适配颜色。
-
直接改:root颜色变量失效，是因为CSS变量存在作用域和层叠顺序：后声明覆盖前声明，组件级样式会局部覆盖全局变量；应统一在:root顶部声明且不重复定义，避免硬编码重写，并检查构建工具插入顺序。
-
position:absolute时margin不失效，但参考系变为定位上下文；relative定位下margin与top叠加易致布局“飘忽”；fixed元素用margin易引发溢出；flex/grid中应优先使用justify-content、gap等现代布局属性而非margin定位。
-
发布订阅模式通过事件总线实现组件间解耦，核心是发布者与订阅者不直接通信，而是通过中心化的调度器传递消息，提升代码模块化与可维护性。
-
通过CSS设置透明度实现HTML页面水印，主要采用背景水印或绝对定位水印；前者利用background-image与opacity属性平铺背景，后者通过position、transform和opacity控制水印位置与透明度，兼顾标识性与内容可读性。
