-
使用CSSmedia属性可实现响应式设计，根据设备屏幕尺寸、分辨率等加载对应样式；2.通过@media规则为不同媒体类型（如screen、print）设置条件样式，例如为屏幕设背景色、打印时隐藏导航栏；3.结合max-width、min-width等媒体特性适配多端布局，小屏用单列，大屏用网格；4.可在HTML中用link标签引入特定媒体类型的外部样式表，如打印样式或高分屏优化样式；5.合理运用media需注意断点选择与样式覆盖，建议配合开发者工具调试。
-
relative定位是“在自身文档流位置基础上偏移”，保留原始占位空间，不脱离文档流；需显式声明position:relative才能激活top/left等偏移，且z-index会隐式创建层叠上下文。
-
用padding-bottom实现固定宽高比需设父容器position:relative、子元素position:absolute并填满，padding-bottom值为高度/宽度比（如16:9时为56.25%），因该属性百分比基于父宽计算，可响应式锁死比例。
-
reset按钮最简单但仅还原HTML初始值；必须置于<form>内，不触发change事件，对JS修改值、受控组件及第三方控件无效，需手动遍历清空或走框架响应式重置。
-
使用CSS变量统一管理主题色，通过:root定义并结合JavaScript动态切换，或利用class、Sass、CSS-in-JS及UI框架实现多主题支持，提升维护效率与体验一致性。
-
abbr标签用于标记缩写词或首字母缩略词，必须同时使用<abbr>包裹且提供非空title属性才能实现语义化和无障碍访问。
-
is()伪类怎么写才不会被忽略浏览器对:is()的支持从Chrome88、Firefox90、Safari15.4开始稳定，但旧版本会直接丢弃整条规则（不是忽略伪类，而是整个选择器失效）。如果你的项目还要兼容Safari15.3或更早，:is()不能单独用——它会让整条CSS规则被跳过。常见错误现象：button:is(:hover,:focus-visible){outline:2pxsolidblue;}在Safari15.3下完全不生效，且控制台
-
回顶按钮点击无效最常见的原因是z-index被遮挡或事件绑定过早；需设z-index:9999并确保JS在DOMContentLoaded后执行，同时用window.scrollTo({top:0,behavior:'smooth'})实现平滑滚动。
-
border-image不显示渐变的主因是默认border-width为0且border-style为none，需显式设置border-width和非none样式；渐变须用linear-gradient内联书写；border-image-slice应设为1fill以避免拉伸变形；Safari等浏览器存在兼容性问题。
-
应优先在自定义交互元素（如按钮、卡片、菜单项）中使用:focus-visible而非:focus，因其仅在键盘导航（Tab等）时激活，避免鼠标用户出现干扰性焦点框，兼顾可访问性与体验。
-
不能直接用Object.defineProperty逐个定义，因为批量配置带get/set的属性时重复写obj参数且易漏configurable:true；Object.defineProperties要求描述符对象结构严格，混用value和get/set会报错，应只保留get/set并设configurable:true，用WeakMap存内部状态，getter中this指向调用对象，避免硬编码对象名，注意性能与兼容性。
-
路由懒加载的核心是按需加载，即用户访问页面时才加载对应模块代码，通过动态import()实现代码分割，配合webpackChunkName命名chunk、Suspense处理loading状态，并支持嵌套路由和权限路由的独立懒加载。
-
Proxy与Reflect结合可实现属性验证、深层冻结、方法自动绑定及响应式数据监听。1.通过set拦截赋值并用Reflect保持默认行为，实现类型校验；2.利用get递归代理嵌套对象，配合不可变操作拦截，实现深冻结；3.在get中对函数自动bind实例，解决this丢失问题；4.在set中触发回调，构建响应式系统。二者协同增强了对象控制力与代码灵活性。
-
dir属性是唯一被所有浏览器强制执行的逻辑方向控制机制，它触发Unicode双向算法，影响字符顺序、标点位置、光标行为等；而lang仅用于样式匹配，类名无语义支持。
-
核心思路是结合transition、transform和媒体查询实现响应式按钮悬停效果。首先设置基础样式，添加hover状态的颜色变化、位移和阴影，再通过@media(max-width:768px)调整小屏设备的样式，使用(hover:none)and(pointer:coarse)判断触屏设备并简化或关闭悬停动画，确保移动端体验流畅。同时注重:active状态反馈，优化性能与可访问性，如避免布局重排、支持prefers-reduced-motion，保证不同设备下交互自然一致。
