🔍 缩放 / 文字尺寸 测试页

用各种缩放方式打开此页面，保存基准后切换缩放，再查看差异。

📊 与基准的差异

📊 实时 JS 测量值

每 500ms 自动刷新

📐 CSS 媒体查询状态

📏 尺寸对比：px vs rem

方块的标注尺寸是 CSS 指定值，括号内是 JS 测量的实际渲染像素

50px
50px × 50px
3rem
3rem × 3rem
100px
100px × 100px
6rem
6rem × 6rem

🖼️ 图片尺寸：px vs rem

同一张 SVG 图片，分别用 px 和 rem 指定高度

height: 48px
height: 3rem
height: 96px
height: 6rem

🔤 字体对比：不同字体族对文字缩放的响应

每种字体分别用 1rem 和 16px 显示同一段文字，观察哪些受影响

📝 文字尺寸对比

font-size: 16px
汉字 ABCDabcd 1234
font-size: 1rem
汉字 ABCDabcd 1234
font-size: 1.2rem
汉字 ABCDabcd 1234
font-size: 14px
汉字 ABCDabcd 1234
font-size: 12px
汉字 ABCDabcd 1234
font-size: 10px
汉字 ABCDabcd 1234

📐 视口单位实测

10vw
10vw × 10vw
10vh
10vh × 10vh
10dvh
10dvh × 10dvh
10svh
10svh × 10svh
10lvh
10lvh × 10lvh