wpf 滚动条长度改变_响应式布局基础篇 你了解这些长度单位吗？

作者 | Brilliant Open Web团队

编辑 | Miya

本文主要讲前端开发中常见的长度单位，为响应式布局设计的学习打下基础。通过对常用单位计算原理的讲解以及相似单位间的对比，加深对基本长度单位的理解，方便后期响应式布局设计实践时选择合适的方案。

自从进入移动互联网时代，响应式布局这个词经常出现在 Web 设计和开发领域，响应式网页设计的理念是让 Web 页面在不同尺寸的设备上和窗口上都能得到友好的渲染，以获得良好的浏览体验。响应式布局可自动调整并适应任何设备屏幕的大小，无论是 PC，平板电脑还是手机。

在学习响应式布局之前，需要先了解一些基础知识，只有对它们有一定的了解，才能在实现的时候选取合适的技术方案。

响应式布局设计通常可以采用“流体”设计、网格布局、弹性布局和 Media Query 等方式来实现。那么，我们就从基础的“流体”设计的概念开始，循序渐进的走进响应式布局。

“流体”设计的概念要求页面元素大小采用相对单位，而不是px这样的绝对单位。有哪些相对单位可以使用？在特定场景下，采用哪种相对单位最合适？让我们先来了解一下这些在 Web 开发中常见的单位。

绝对单位 --px

你真的了解px吗？为什么 iPhone X 手机标注的分辨率是 1125x2436，而开发中却以 375px 为整个页面的设计宽度呢？

px

像素一般指 PC 或者手机屏幕上的光点，常见的描述中 iPhone X 的分辨率 1125x2436，一般指的是在屏幕长和宽上像素点的个数，对应设备的物理分辨率。而在 Web 开发中，经常提到 iPhone X 的分辨率是 375x812，又是怎么回事呢？这里需要提到设备像素(Device Pixels)和虚拟像素--也可以叫 CSS 像素(CSS Pixels)或者逻辑像素(后面统一使用 CSS 像素这个称呼)，虚拟像素在 Android 开发中又被叫做设备无关像素(Device Independent Pixel，简写 dip)。设备像素很好理解，对应屏幕上光点的数量，即设备的物理分辨率。而 CSS 像素则对应了设备的逻辑分辨率。

科技发展到今天，屏幕的物理分辨率已经达到人眼无法区分单个像素的程度，人眼无法在 iPhone X 宽不到 7cm 的屏幕上数出 1125 个像素点。Web 开发人员眼中的 1px 可能对应多个设备像素，这个 “1px” 指的就是 CSS 像素，对应的是设备的逻辑分辨率(Peter-Paul Koch 在他的博文《A pixel is not a pixel is not a pixel》中有详细的讲解：https://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html)。

比如在 iPhone X 上，设备像素是 1125x2436，而 CSS 像素(逻辑像素)是 375x812，那么一个 CSS 像素对应的是长和宽各 3 个设备物理像素，共 9 个设备物理像素点。

 1 css pixel = 3 x 3 device pixels

这个比值 3 就是平时所说的设备像素比(Device Pixel Ratio)，简称为 DPR。DPR 不是一个单位，而是一个比值，这个比值可以在浏览器中通过  window.devicePixelRatio获取。

// 设备像素比，在 iPhone X 中等于 3，在 iPhone 6 中等于 2window.devicePixelRatio

所以， Web 开发中使用的px，比如height = 1px，实际指的是设备的 CSS 像素，并不是屏幕上真实的光点数，1px 具体对应屏幕上的多少光点，还取决于设备的 DPR。比如，1px 在 iPhone X 上对应 3x3 个屏幕上的光点，而在 iPhone 6 上就对应了 2x2 个屏幕光点。

通过上面的分析我们知道了px单位的来历，当使用了px为单位，元素的大小就会按照 CSS 像素和 DPR 渲染在屏幕上。但是像电脑和手机这样不同的设备，它们的 CSS 像素是不同的，如果用px设定了同样的大小，就会导致在电脑上显示正常的字体在手机上特别小。怎么解决这个问题相信你已经有答案了，就是相对单位，那么相对单位有哪些，它们之间的区别又是什么呢？

字体相对单位 --EM，REM

提到相对单位，最熟悉最常见的就是em和rem。什么时候应该使用em，什么时候使用rem呢？

EM

em是元素相对于自身的 font-size，它不像px是固定的单位，因此很适合用来做响应式布局。