-
横屏适配需用@media(orientation:landscape)与@media(min-aspect-ratio:1280/720)双重判断，禁用orientationchange事件，改用matchMedia监听；width避免100vw改用100%或100dvw；viewport加text-size-adjust:100%防字体缩放。
-
Leaflet地图在React应用中因视口缩放未正确配置，导致移动端渲染时内容溢出、遮挡Navbar；根本解决方案是在HTML<head>中添加严格控制的viewport元标签。
-
DOM操作提供六种核心技巧：一、createElement+appendChild添加元素；二、insertBefore精确插入；三、replaceChild替换节点；四、removeChild删除子元素；五、innerHTML/textContent批量更新；六、cloneNode复制结构。
-
BEM与scoped分工协作：BEM规范命名意图，scoped控制作用域边界；合用可防样式污染，但需规避动态类名未声明、穿透无容器等误用。
-
能，但须符合语义且仅用于东亚文字注音；需ruby+rt+rp结构，主流浏览器支持良好，IE≤10不支持；禁用于英文缩写等非注音场景。
-
label的for属性必须严格匹配input的id，否则点击文字无法聚焦；推荐用label包裹input免配置绑定；aria-labelledby仅服务辅助技术，不触发点击聚焦；排查时优先验证id是否存在且唯一。
-
select设width:100%未生效，主因是父容器无明确宽度或为inline元素，且旧版浏览器对border-box下padding/border处理异常；需确保父容器为块级并设宽，select显式声明box-sizing:border-box。
-
<inputtype="hidden">是唯一合法隐藏域，必须设type="hidden"、非空name、字符串value；value需转义，复杂数据用json_encode/json_decode；同名多字段自动为数组；值可被篡改，服务端须校验。
-
容器查询比媒体查询更合适折叠屏，因其能响应单个容器尺寸变化而非仅视口；需显式设置container-type和container-name，推荐inline-size；@container语法类似@media但作用域受限，须避免嵌套过深及与@media混用。
-
目前无法通过CSS伪类如::picture-in-picture-volume直接控制画中画（PiP）模式下音量条的样式，因为PiP窗口的UI由浏览器原生实现且出于安全、用户体验一致性和技术复杂性考虑被严格限制自定义；开发者只能通过JavaScript操作源视频元素的volume属性来间接控制音量，或依赖系统级音量调节，同时可在网页内构建自定义播放器界面，将音量控制与PiP按钮集成，从而在进入PiP前提供良好体验，确保用户无论通过网页控件还是操作系统功能都能有效调整音量，最终实现对PiP音量的全面管理。
-
ChromeDevToolsCoverage面板仅统计实际加载执行的JS/CSS资源，不统计HTML文件本身；内联脚本/样式计入覆盖率，但HTML中的未触发资源（如hidden元素内联代码、懒加载脚本）不会被覆盖，需手动模拟全用户路径操作以提升统计准确性。
-
用CSS的linear-gradient()可实现纯色渐变，需显式声明方向（如toright或45deg），正确分隔颜色并加fallback底色，避免transparent兼容问题；移动端慎用fixed，HSL插值应手动控制。
-
普通函数直接调用时，非严格模式下this指向全局对象（如window），严格模式下为undefined；箭头函数无this，继承外层作用域；call/apply/bind可手动指定this，bind返回的新函数this不可再被call/apply更改；对象方法赋值后调用会丢失this绑定；new调用时this指向新创建的实例。
-
可通过五种CSS方法取消链接下划线：一、内联style设text-decoration:none；二、内部样式表统一设a{text-decoration:none}；三、外部CSS用类选择器如.no-underline；四、重置所有a伪类的text-decoration；五、用CSS变量--link-underline集中控制。
-
Vue.js中的watch可实现响应式数据自动持久化：监听目标数据并序列化存入localStorage，初始化时读取恢复，推荐封装为useLocalStorageComposable统一处理读写、异常及多标签页同步。
