-
WebRTC是实现浏览器视频通话的核心技术，它通过JavaScriptAPI实现P2P音视频通信。首先调用getUserMedia()获取本地音视频流，再创建RTCPeerConnection实例管理连接。通过信令服务器交换SDP（Offer/Answer）描述会话信息，并利用STUN/TURN服务器收集ICECandidate进行网络穿透。信令服务器协调连接建立，不传输媒体流；STUN用于获取公网地址，TURN在P2P失败时中继数据。连接成功后，音视频流直接在浏览器间传输，低延迟且安全加密，实现高效实时
-
纯CSS粒子仅支持静态或简单循环动画，因无逐帧计算能力，无法实现鼠标吸附、碰撞反弹等交互效果，且粒子数超150易致渲染瓶颈；canvas+requestAnimationFrame才是高密度、物理响应式粒子的正确方案。
-
Grid更适合主容器布局，因其二维可控性强、无需脱离文档流、响应式健壮；float易致塌陷、清除困难、维护成本高，且无法精准控制区域宽高与对齐。
-
最简单方法是设html{scroll-behavior:smooth;}，但Safari15.4前及部分安卓WebView不支持；JS需显式调用scrollIntoView({behavior:'smooth'})，注意目标元素存在性与渲染时机。
-
--scale变量配合calc()控制尺寸比transform:scale()更可靠，因它改变布局盒而非仅渲染层，避免点击区域错位、坐标系失准、字体糊化等问题。
-
答案是通过可视化工具、日志记录、事件追溯和模块化设计来快速定位状态变化源头。使用Redux/VuexDevTools实现时间旅行调试，结合logger中间件追踪action与状态变化，利用断点和调用栈回溯触发源，借助不可变性检测防止非法修改，并通过单元测试预防问题，同时在复杂应用中采用清晰的架构分层、命名规范、模块划分和副作用管理，避免状态混乱。
-
绝大多数卡片列表场景该用auto-fit，但依赖固定列数对齐、动画或预留插槽时必须用auto-fill；auto-fit在卡片少时会拉宽列宽，auto-fill则可能产生隐形空列并受gap影响。
-
用单个隐藏<audio>实例配合JS动态切换src实现轻量音乐列表，列表项绑定data-src属性，点击时暂停当前、更新源并播放，注意iOS用户手势触发、Promise错误捕获及跨域配置。
-
transition-duration属性用于设置CSS过渡动画的持续时间，值越长过渡越慢，单位支持秒（s）和毫秒（ms）；可为不同CSS属性指定不同的过渡时长，如background-color用0.3s、transform用0.6s；结合transition-timing-function（如ease、linear、ease-in-out）可调整过渡的速度感，使动画更自然；常见场景中，悬停效果建议0.2s-0.4s，菜单展开0.3s-0.6s，页面切换0.5s-1s，避免过短或过长影响体验。
-
用CSS变量控制滚动位移易断层，因--offset自由增长未归一化；需JS将其限定在[0,100vw]内重置，或采用双容器错位法实现无缝滚动。
-
使用统一颜色格式（如hsl或rgb）、避免混合表示法，采用cubic-bezier缓动函数优化过渡，推荐transition替代animation实现hover颜色动画，提升流畅度并减少闪烁。
-
ConsultingLite不支持旧式align属性，仅响应class="alignright"等原生CSS类；其默认用float实现图文环绕，但易受父容器布局或媒体查询干扰，推荐改用CSSGrid/Flex手动封装以确保稳定。
-
CSS变量（CustomProperties）是主题切换的正确方案，HTML无原生变量；data-属性仅作标记，需配合CSS选择器或JS生效；:root与[data-theme]组合最稳妥；var()必须设回退值；localStorage恢复需在CSS解析前完成。
-
用<img>嵌入静态地图URL（如高德/百度静态图API），配合<div>列表展示网点信息，零依赖、轻量高效；注意坐标顺序、参数拼写、响应式CSS和语义化结构。
-
直接用rotate()做菱形容易错位，因为默认以左上角为旋转原点，需显式设transform-origin:center；父容器须为等宽高等尺寸的正方形并加overflow:hidden，配合45deg旋转才能实现全对称菱形。
