-
应使用order属性配合flex布局实现平滑拖拽排序动画，因其支持transition、语义正确且DOM顺序与视觉一致；避免用transform或top/left，因会导致掉帧、占位异常及无障碍问题。
-
最可靠方式是用height:100vh，它直接基于视口高度，不依赖父元素设高；而height:100%常因父级无明确高度失效，且在移动端和嵌套场景中存在滚动、缩放等兼容性问题。
-
namespaced是Vuex多模块隔离的核心机制，必须显式设为true才能启用；调用时需加模块前缀，跨模块通信应通过getter或带{root:true}的commit/action解耦，动态注册模块也须始终启用namespaced。
-
根本差别在于是否愿为一致性、响应式适配、重复样式收敛持续手动维护；手写CSS易失控因命名冲突、断点不一、单位混乱、伪类覆盖难；Tailwind用原子类规避问题但HTML变冗长；Bootstrap省设计决策时间但受限于其设计边界。
-
路由懒加载配合骨架屏的核心是“视觉先行、内容后到”——通过按需加载组件减少首屏体积，并用结构一致的灰阶占位图降低用户感知等待时间，需精准控制骨架屏显隐时机与布局稳定性。
-
WebCryptographyAPI提供浏览器原生加密能力，支持密钥生成、加解密、签名验证，实现端到端加密。通过crypto.subtle接口使用非对称加密（如RSA-OAEP、ECDH）交换密钥，结合对称加密（如AES-GCM）加密数据，确保服务器无法访问明文。安全密钥交换依赖公钥基础设施，常用非对称加密或Diffie-Hellman协议实现完美前向保密。为防中间人攻击，需结合安全码验证、TOFU或带外认证。API存在安全边界：客户端易受XSS或恶意软件攻击，私钥不应明文存储于localStorage，
-
使用Bulma的Columns系统可解决移动端表单布局不一致问题，1.通过is-mobile、is-tablet等类控制不同屏幕下的排列；2.使用is-half、is-12-mobile等宽度类适配字段宽度；3.添加is-multiline防止换行错乱；4.避免嵌套过深确保Flex正确计算，从而实现跨设备一致的响应式表单布局。
-
在Electron全屏Kiosk应用中，当嵌入的iframe页面包含mailto:链接时，系统默认会启动外部邮件客户端，导致用户脱离应用。本文介绍如何通过will-frame-navigate事件精准拦截此类跨帧导航请求，无需修改iframe内容即可实现全局防护。
-
应监听mousemove或touchmove（依设备能力探测），将归一化坐标存入:root的CSS变量（如--mouse-x-pct），CSS中用background-position:var(--mouse-x-pct)%var(--mouse-y-pct)%或transform:translate(var(--mouse-x),var(--mouse-y))实现平滑响应，注意单位一致、防抖及移动端preventDefault。
-
将HTML文件放在webapp目录下，通过正确路径访问，配置欢迎页可实现根路径自动加载，使用IDE部署到Tomcat后即可访问多个页面，注意项目名和路径大小写。
-
可行但有浏览器兼容边界：Chrome103+、Firefox110+、Safari16.4+支持aspect-ratio，旧版Safari（15.x及更早）或IE不支持，需用padding-top百分比技巧fallback。
-
Proxy是JavaScript用于拦截并自定义对象基本操作的代理构造函数，通过handler提供get、set、has、deleteProperty等trap拦截读写、枚举、构造等行为，支持校验、日志、响应式等场景。
-
MobX通过observable、action、computed和reaction实现自动依赖跟踪，利用Proxy或defineProperty拦截数据读写，构建响应式依赖图，状态变化时精准更新依赖项。
-
懒加载与动态导入本质是按需加载技术，核心为动态import()语法，支持运行时调用、变量路径和构建工具代码分割，用于路由、交互、视口等场景，需结合实际性能权衡使用。
-
使用auto-fit和minmax()结合CSSGrid创建响应式导航，配合mediaquery在小屏下调整为单列布局，确保各设备上均有良好体验。
