-
JavaScript在移动端适配中补充CSS响应式设计，通过监听屏幕变化动态调整交互逻辑。1.使用resize事件配合防抖控制DOM操作频率；2.推荐使用matchMedia监听媒体查询，语义化判断设备类型，实现内容动态加载、触控事件绑定、虚拟键盘处理及动画控制等场景，提升多端用户体验。
-
<p>Safari中backdrop-filter需加-webkit-前缀且背景不透明才生效；blur值不能为0；模糊区域大小比数值更影响性能；文字需增强对比度与描边保障可读性。</p>
-
纯CSS轮播关键在scroll-snap实现精准停靠：需设scroll-snap-type:xmandatory、每项scroll-snap-align:center、容器overflow-x:auto+scroll-behavior:smooth，:target仅触发锚点定位。
-
使用Flex布局和圆角控制创建一体化按钮组，通过共享边框避免双线、统一内边距与颜色，并支持悬停交互与响应式垂直排列。
-
IntersectionObserver触发不准主因是默认threshold=0过于敏感，应设为[0.1,0.3,0.5]并配合class切换、forwards动画保持、兼容性降级及仅对opacity/transform动画等优化。
-
正确绑定input的list属性与datalist的id是实现下拉建议的关键，二者必须完全一致；datalist仅支持前缀匹配、静态选项，不支持label、动态加载或选中事件监听，复杂场景需JS方案替代。
-
本文详解如何通过合理设置scale、position和z-index实现多图布局中单张图片悬停时无遮挡地放大显示，重点解决因层叠上下文（stackingcontext）导致的z-index失效问题。
-
使用CSSGrid布局展示图片最推荐，通过display:grid、grid-template-columns和gap实现灵活响应式网格，配合object-fit和hover效果提升视觉与交互体验。
-
使用box-sizing:border-box可让宽度包含padding和border，避免浮动元素超出父容器；需统一设置子元素及父容器该属性，并配合百分比宽度实现响应式布局。浮动导致父容器高度塌陷时，应采用clearfix或overflow:hidden触发BFC以清除影响。为防止margin叠加引发换行，建议仅设置单侧外边距并移除最后一个元素的外边距，结合固定padding提升兼容性。通过精确控制盒模型尺寸、合理清除浮动及间距管理，能有效提升浮动布局的稳定性和可维护性。
-
max-height过渡被选作折叠面板动效基础，因其可动画且能模拟height:auto；需预估合理阈值（如400px），配合媒体查询分层调整，并与overflow:hidden、transition等协同声明以避免抖动或溢出。
-
HTML5已成浏览器默认底层协议，无需从零学但须每日实践；其新在于提供原生语义控件与底层能力接口（如IntersectionObserver、ResizeObserver），强调直接调用而非JS模拟，思维需转向“查原生API优先”。
-
Vue3的watchEffect配合CSS变量可实现轻量、响应式主题换肤——自动追踪主题ref变化，通过document.documentElement.style.setProperty动态写入带前缀的CSS变量（如--theme-primary），CSS中用var()引用并设回退值，复杂场景辅以class切换，全程无DOM手动操作、无额外状态管理。
-
::after清除浮动失效的根本原因是伪元素默认display:inline，无法触发BFC且不撑高父容器；必须同时满足content非none（如""）和display为block/table/flex等块级显示值。
-
Metarefresh能当短链接用但仅限极简场景，它不生成真实短域名、无统计防刷等功能，且需严格遵循HTML规范与服务器配置要求。
-
解构赋值可通过嵌套结构、默认值、动态键名、函数参数解构、别名及剩余运算符等高级技巧提升代码可读性与开发效率，适用于处理复杂数据结构、配置项和API响应。
