电脑常用资料 & 工具导航

什么是 DPI / 设备像素比（DPR）？

屏幕有「物理像素」和「CSS 像素」两套坐标。DPR = 物理像素 / CSS 像素。Retina/高清屏 DPR 通常为 2~3，意味着同样 1 个 CSS 像素由 2×2 或 3×3 个物理点渲染，画面更细腻。本页通过 window.devicePixelRatio 实时读取你的 DPR（见上方诊断面板）。

视口（Viewport）缩放

头部 <meta viewport content="width=device-width, initial-scale=1"> 让布局宽度跟随设备 CSS 宽度、初始缩放为 100%，是移动端自适应的基石；viewport-fit=cover 配合 env(safe-area-inset-*) 适配刘海/底部横条/挖孔屏的安全区。

流式排版：clamp() + 相对单位

标题用 clamp(24px, 3.2vw, 40px)、时钟用 clamp(34px, 4.6vw, 52px)，字号随视口在最小值与最大值之间连续缩放；基础字号 --base 用 px 在各断点整体抬升，大屏（≥1800px / 4K）自动放大到 18px / 22px，兼顾远距离观看。

断点分级（本页策略）

• 手机 ≤600px：2 列紧凑卡片、触控目标 84px、搜索全宽。
• 平板 601–960px：侧栏折叠为顶部横滑胶囊条，卡片略放大。
• 电脑 ≥1400px：卡片 250px，固定左侧粘性分类栏。
• 电视/投影 ≥1800px / ≥2600px(4K)：字号、时钟(72→92px)、表盘(200→240px)、卡片同步放大填充大视野。
• 车机横屏：hover:none+pointer:coarse+landscape 命中，触控目标 110px、对比度增强、禁用悬停位移。

字体缩放与无障碍

当用户在系统设置放大字体（桌面 125%/150%、手机「显示大小」）时，浏览器会以 em/rem 相对单位按比例放大文本；本页卡片描述、按钮、侧栏均使用相对/可继承字号，跟随缩放。同时尊重 prefers-reduced-motion（减弱动画）与 prefers-color-scheme（初始深浅主题）。

高密度屏图标（favicon）

站点图标通过 Google s2/favicons API 按域名拉取，请求 sz=64 的高分辨率版本以在 Retina/4K 屏清晰显示；进入视口才懒加载（IntersectionObserver），无图域名自动回退字母占位。