-
viewport-fit是iOS11+控制视口是否适配刘海屏/异形屏的关键参数，需配合env()函数避让安全区；默认auto留黑边，cover需手动处理顶部/底部内边距，否则内容被裁切，且安卓WebView多数忽略该属性。
-
原生<progress>标签需同时设置value和max（建议max=100）才有效，否则易爆表或不渲染；不支持IE、无内置百分比文本、样式需伪元素适配且跨浏览器不一致，动态更新须防高频触发、数值越界和完成态卡顿。
-
纯CSS自动轮播可用animation+@keyframes实现，关键在于绝对定位叠放元素、opacity/z-index或transform控制显隐与位移，配合radio输入框实现手动切换，避免JS依赖及兼容性问题。
-
响应式网页设计通过CSS实现多设备适配，首先设置viewport元标签确保正确缩放；接着使用媒体查询按屏幕宽度应用不同样式，推荐移动优先策略；采用相对单位（如%、rem、vw）替代固定像素值以增强弹性；通过max-width:100%确保图片不溢出容器；结合Flexbox和Grid布局实现动态排列，如导航栏垂直堆叠与卡片自动换行；最终构建流畅跨设备体验。
-
本文详解useState在API调用后看似“不更新”的根本原因，通过useEffect监听状态变化、确保路由跳转时机正确，并安全地将数据传递至Context消费组件，避免因状态滞后导致的渲染错误或undefined访问。
-
可通过JavaScript动态创建img元素并设置src实现图片加载，如document.createElement('img')并添加到DOM；2.可监听onload和onerror事件处理加载成功或失败；3.可通过修改已有img元素的src属性替换图片；4.懒加载可通过data-src存储路径，待时机成熟再赋值src以优化性能。
-
父容器必须设position:relative，因为absolute元素会相对于最近的已定位祖先定位；若无则回退至body或视口，导致文字错位、飘出图片。
-
移动端卡片翻转必须用JS切换class实现，因iOSSafari等浏览器不触发:hover；需监听click或touchstart事件，设置perspective、preserve-3d、translateZ及backface-visibility等CSS属性确保3D渲染稳定。
-
viewport是移动端页面正常显示的底线，必须写在<head>最前面且内容为width=device-width,initial-scale=1，缺一不可；否则iOSSafari默认按980px渲染，文字过小、布局错乱。
-
不能直接用watchEffect监听定时器ID，而应监听isActive、intervalMs等响应式状态，每次触发前清除旧定时器，满足条件时新建，并在清理函数中再次清除，避免堆积导致卡死。
-
必须在服务端HTML中静态写入OG标签，因社交平台爬虫不执行JS；微信要求og:image为HTTPS绝对URL且≥300×300px；Facebook、微信、微博、Twitter对OG支持差异大，需按平台适配。
-
本文介绍如何根据<select>下拉框的选中项，动态更新关联<inputtype="number">的max属性，并确保用户输入实时受控、超出范围时自动修正。核心依赖原生事件监听与DOM操作，无需框架。
-
FetchAPI是现代浏览器发起网络请求的标准方式，相比XMLHttpRequest更简洁强大，基于Promise支持async/await，但需手动处理状态码异常和响应解析，且不支持超时、上传进度监听等，IE不兼容。
-
Inject传递的必须是响应式数据源而非原始异步结果，需用ref/BehaviorSubject封装data、loading、error状态，统一管理请求生命周期、避免重复调用，并在组件销毁时清理订阅。
-
requestAnimationFrame（rAF）是实现流畅动画的关键机制，1.它与浏览器刷新周期同步，避免画面撕裂和跳帧；2.在页面不可见时自动暂停以节省资源；3.提供高精度时间戳实现帧率无关动画。通过在每次重绘前调用回调函数，rAF确保动画帧与屏幕刷新同步，形成自然流畅的视觉效果。相比setTimeout/setInterval，它能更高效地调度动画逻辑，尤其在性能和节能方面表现突出。使用时需注意性能监测、避免主线程阻塞、合理管理动画状态，并结合visibilitychange事件控制动画启停，同时
