第二章 分辨率基础：屏幕分辨率概念、常见分辨率规格与像素密度

好，咱们正式开始聊分辨率。说实话，很多同学做了三五年大屏，问起「什么是分辨率」，回答就是「1920×1080嘛」。嗯，对，但不全对。分辨率背后藏着不少门道，搞不懂这些，自适应方案就是空中楼阁。

我个人习惯把分辨率拆成三个层面来理解：物理分辨率、逻辑分辨率、渲染分辨率。这三者搞混了，适配就会出大问题。我见过一个项目，设计师按2K出图，开发按1080p写代码，结果上线后字体糊成一团——说白了，就是没搞清楚谁是谁。

2.1 屏幕分辨率到底是什么？

屏幕分辨率，简单讲就是屏幕上横向和纵向的像素数量。比如1920×1080，就是横向1920个像素点，纵向1080个像素点。每个像素点就是一个发光的小方块，它们组合起来就形成了你看到的图像。

但这里有个坑：像素不是物理尺寸。同样1920×1080，在23寸显示器和55寸电视上，像素点的大小完全不同。你想想看，这就解释了为什么同样分辨率，手机上的字那么小，电视上的字那么大。

2.2 常见分辨率规格一览

做可视化大屏，这几个分辨率你必须烂熟于心。我按使用场景给你捋一遍：

规格	标准分辨率	常见场景	我的建议
1080p (FHD)	1920×1080	普通显示器、入门大屏	基础适配目标，兼容性最好
2K (QHD)	2560×1440	中高端显示器、拼接屏	目前大屏项目的主流选择
4K (UHD)	3840×2160	高端大屏、指挥中心	未来趋势，但要注意性能开销
8K (FUHD)	7680×4320	顶级展览、特殊项目	目前较少，但需要了解

这里有个细节：2K其实是个比较模糊的叫法。有些地方把2048×1080叫2K，有些把2560×1440叫2K。我在项目中一般以2560×1440为准，因为这是显示器行业的主流标准。嗯，遇到客户说「我要2K大屏」，一定要确认具体分辨率，不然容易翻车。

2.3 像素密度（PPI）—— 被很多人忽略的关键指标

PPI，全称Pixels Per Inch，每英寸像素数。它才是决定画面细腻程度的真正指标。

公式很简单：

PPI = √(横向像素² + 纵向像素²) / 屏幕对角线英寸数

举个例子：一台27寸2K显示器（2560×1440），PPI大约是109。而一台27寸4K显示器（3840×2160），PPI大约是163。同样是27寸，4K的细腻程度明显更高。

为什么说这个重要？因为大屏项目里，PPI决定了你的字体和线条能不能看清。我曾经做过一个项目，客户买了块超大LED屏，分辨率只有1920×1080，但屏幕有3米宽。你算算PPI——低得可怜。结果呢？图表上的小字根本看不清，最后只能重新设计，把字体放大两倍。

2.4 视口（Viewport）—— 浏览器里的分辨率

视口，就是浏览器里你能看到的区域。它和屏幕分辨率不是一回事。

在桌面端，视口宽度通常等于浏览器窗口宽度。但在移动端和某些大屏场景下，情况就复杂了。比如有些大屏系统用嵌入式浏览器，视口可能被限制在某个区域内。

我常用的几个视口相关概念：

• 布局视口（Layout Viewport）：CSS布局参考的视口，通常等于浏览器窗口
• 视觉视口（Visual Viewport）：用户实际看到的区域，缩放时会变化
• 理想视口（Ideal Viewport）：设备推荐的视口大小，通常等于物理分辨率除以设备像素比

做自适应方案时，我一般用window.innerWidth和document.documentElement.clientWidth来获取视口尺寸。但要注意，这两个值在有些浏览器里不一样。我个人习惯用clientWidth，因为它更稳定。

// 获取视口尺寸的推荐方式
function getViewportSize() {
  return {
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight
  };
}

// 监听视口变化
window.addEventListener('resize', () => {
  const { width, height } = getViewportSize();
  console.log(`视口尺寸：${width} × ${height}`);
});

2.5 设备像素比（DPR）—— 高清屏的秘密

DPR，Device Pixel Ratio，设备像素比。它表示一个CSS像素对应多少个物理像素。

普通屏幕DPR=1，Retina屏幕DPR=2，有些高端手机DPR=3甚至更高。这意味着在Retina屏幕上，一个CSS像素实际上用了2×2=4个物理像素来渲染。所以文字和线条看起来特别细腻。

做可视化大屏时，DPR的影响主要体现在：

• Canvas绘图：需要根据DPR缩放，否则在高清屏上会模糊
• 图片资源：需要提供2倍图甚至3倍图
• 字体渲染：高清屏上字体更清晰，但也要注意不要太小

2.6 大屏项目中的分辨率适配策略

说了这么多理论，咱们落地到实战。做自适应方案，我一般分三步走：

1. 确定基准分辨率：通常选1920×1080，因为这是最通用的标准
2. 计算缩放比例：根据实际屏幕分辨率和基准分辨率的比值，确定缩放系数
3. 动态调整：监听视口变化，实时更新缩放

这里给一个简单的缩放方案示例：

// 基准分辨率
const BASE_WIDTH = 1920;
const BASE_HEIGHT = 1080;

// 计算缩放比例
function calculateScale() {
  const { width, height } = getViewportSize();
  const scaleX = width / BASE_WIDTH;
  const scaleY = height / BASE_HEIGHT;
  // 取较小值，保证内容完整显示
  return Math.min(scaleX, scaleY);
}

// 应用缩放
function applyScale() {
  const scale = calculateScale();
  document.documentElement.style.fontSize = `${scale * 16}px`;
  // 或者用transform缩放整个容器
  // container.style.transform = `scale(${scale})`;
}

好了，分辨率的基础知识就聊到这儿。下一章咱们会深入讲自适应方案的具体实现，包括rem适配、vw适配、scale缩放等主流方案。到时候你会看到，今天这些概念都会用上。

记住一句话：搞不清分辨率，就别谈自适应。这是地基，地基不稳，楼盖得再高也得塌。