data-*属性配合JS动态计算缩放比时，通过<html data-design-width="1920">挂载设计基准，JS读取dataset.designWidth并用parseFloat()转换后计算缩放比，可避免硬编码、提升可维护性；需注意IE11兼容性及SSR场景下空值校验。
data-* 属性配合 JS 动态计算缩放比
当使用 rem 实现全局等比缩放时，data-scale 这类自定义属性能避免硬编码设计稿宽度，提升配置可维护性。比如在 <html data-design-width="1920"> 上挂载设计基准，JS 读取后算出当前缩放比：document.documentElement.clientWidth / parseFloat(document.documentElement.dataset.designWidth)。这样换设计稿只需改一个属性值，不用动 JS 逻辑。
容易踩的坑：
- dataset 读取的是字符串，必须用
parseFloat或parseInt转换，否则除法结果为NaN - IE11 不支持
dataset，需降级用getAttribute('data-design-width') - 若页面初始加载时
html尚未渲染完成（如 SSR 场景），直接读取可能返回undefined，建议加空值校验
aria-hidden 配合媒体查询隐藏非关键响应式元素
在小屏下隐藏装饰性图标、冗余标题或次要导航栏，不能只靠 display: none —— 它仍会被屏幕阅读器解析，造成无障碍干扰。用 aria-hidden="true" 显式声明语义不可见，再配合媒体查询控制视觉状态，才是双保险。
示例写法：
立即学习“前端免费学习笔记（深入）”；
<div class="decorative-badge" aria-hidden="true" media="(max-width: 768px)">NEW</div>
注意点：
-
aria-hidden必须和 CSS 的display或visibility同步更新，否则出现“看不见但可聚焦”或“看得见却被读屏跳过”的错位 - 不要对交互主控元素（如按钮、输入框）滥用
aria-hidden，它会彻底移除其可访问性树节点 - 某些旧版 Safari 对动态切换
aria-hidden响应迟缓，建议用class控制 +aria-hidden批量同步
srcset 和 sizes 属性让图片真正适配视口而非仅缩放
srcset 不是“让图片变小”，而是让浏览器按设备像素比和视口宽度，选择最合适的原始图资源。比如 <img src="a-400.jpg" srcset="a-400.jpg 400w, a-800.jpg 800w, a-1200.jpg 1200w" sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 30vw">，浏览器会根据当前 sizes 计算出所需宽度，再从 srcset 中挑最接近的源。
常见误用：
- 只写
srcset不写sizes：浏览器默认按 100vw 计算，导致小屏也加载大图 -
sizes值写成固定像素（如sizes="800px"）：失去响应能力，无法随布局变化 - 忽略 DPR（设备像素比）：高 DPR 设备（如 iPhone）需要 2x 图源，否则图片发虚；应在
srcset中补充x描述符，如"a-400.jpg 1x, a-800.jpg 2x"
translateZ(0) 触发硬件加速却可能破坏自适应定位
给容器加 transform: translateZ(0) 是常用强制 GPU 加速手段，但在 flex/grid 容器中，它会让子元素脱离文档流的相对计算上下文，导致百分比宽高、flex-basis 或 grid-template-columns: 1fr 行为异常 —— 尤其在窗口 resize 后，尺寸不再随父容器重排。
真实影响场景：
- 移动端横竖屏切换时，原本占满宽度的卡片突然变窄，留白严重
- 使用
vw设置字体大小的标题，在加了translateZ(0)的父层里，文字不再随视口缩放 - 含
position: sticky的导航栏，在触发translateZ的滚动容器内失效
替代方案更稳妥：优先用 will-change: transform 懒触发，或只对明确需要动画的元素局部启用 translateZ，绝不套在整页 layout 容器上。
