-
使用min-width防止百分比宽度在小屏下过窄，结合max-width与媒体查询优化响应式布局，确保元素在不同设备上保持可读性和合理尺寸。
-
viewportmeta标签必须正确添加在head中，格式为<metaname="viewport"content="width=device-width,initial-scale=1.0">，禁用user-scalable=no；CSS应优先使用rem或vw替代px；图片需配合srcset/sizes与max-width:100%、height:auto；布局推荐flexbox。
-
根本原因是桌面端grid声明直接照搬小屏，导致列宽不足；必须用移动优先+媒体查询分层控制列数、gap和span，并确保子元素也响应式。
-
JavaScript需要事件循环来处理回调函数，因为它是单线程语言，必须在不阻塞主线程的前提下调度异步任务。1.回调函数定义了异步操作完成后要执行的代码；2.事件循环作为调度员，确保回调在主线程空闲时有序执行；3.宏任务（如setTimeout）和微任务（如Promise.then）有不同优先级，微任务优先执行；4.事件循环流程为：执行同步代码→清空微任务队列→执行一个宏任务→重复循环；5.Promise和async/await是对回调的封装，提升可读性与维护性，但底层仍依赖事件循环机制。
-
@keyframes滑入动画核心是用translateX(±100%)从视口外移入，百分比基于元素自身宽；需显式设初始transform避免跳变；推荐JS控制类名触发，配合animation-fill-mode:forwards保持终态。
-
网页嵌入可交互在线地图需借助第三方API：一、高德地图需申请Key并引入SDK；二、百度地图需获取AK并初始化BMap；三、Leaflet配合OSM免密钥但需遵守版权；四、腾讯地图支持iframe快速嵌入但交互受限；五、GoogleMapsEmbedAPI需有效密钥且限国际使用。
-
背景图不显示主因是路径解析错误，需按CSS文件位置而非HTML位置确认；background-size不生效常因被简写属性重置或容器无高度；HTML5语义标签需显式设宽高防塌陷。
-
优先按项目现有格式选用HEX/RGB/HSL，避免混用；需透明度选RGBA/HSLA，动态调色优选HSL；复制前用开发者工具验证真实渲染值；推荐Coolors和HSLPicker导出干净CSS。
-
localStorage不能存敏感信息，仅适用于非敏感前端状态数据；使用setItem/getItem/removeItem操作字符串，对象需JSON序列化；存在XSS窃取、明文存储、无访问控制等安全风险。
-
正确写法是grid-template-columns:repeat(auto-fit,minmax(250px,1fr)))，配合img{width:100%;height:auto;}，确保图片等比缩放不拉伸、不溢出，auto-fit自动填满且不留空列。
-
答案：开发JavaScript插件时，单元测试能保障代码质量。应选择Jest等测试框架，将核心逻辑封装为纯函数并模块化导出，利用断言和Mock验证行为，覆盖异步与边界情况，并通过覆盖率工具优化测试完整性。
-
优先用类选择器，标签选择器适合全局复用，ID选择器仅限JS锚点或唯一容器；ID重复导致CSS/JS不可预测，类名重复合法，标签写错则不匹配。
-
需用JavaScript监听mousemove/touchmove，归一化鼠标坐标并取反缩放后设为background-position，配合requestAnimationFrame节流和resize重校准，才能实现平滑视差背景效果。
-
HTML5中嵌入在线文档需根据来源选择方案：一、用iframe嵌入GoogleDocs等公开文档，须设“任何人可查看”；二、通过OnlyOffice等第三方服务中转，确保响应头允许嵌入；三、用object/embed加载PDF，需服务器配置CORS；四、无法修改源站时，可用服务端代理过滤禁用响应头。
-
preload="auto"加重卡顿因浏览器保守处理、移动端中断重请求；推荐metadata+JS可控load；MSE可编程缓冲，需检查支持性、设sequence模式、用playbackQuality检测卡顿；HLS/DASH分片宜4–6秒并关键帧对齐。
