CSS—px与rem：3分钟掌握rem适配原理

个人博客：haichenyi.com。感谢关注

1. 目录

1–目录
2–px
3–rem
4–移动端适配

2. px(像素)

px我们用的很多，一直都在用。我们真的了解px吗？
之前最常见的720P的分辨率和1080P的分辨率是啥意思？这里的720P的对应的就是1280x720，1080P对应的就是1920x1080。以1080P为例：

1920的意思就是水平方向上有1920个像素点
1080的意思就是垂直方向上有1080个像素点
像素点是什么意思呢？
我再举一个例子。

如上图，不同物理尺寸，相同分辨率的设备。看上面的点，两个设备水平方向上的点个数都是相同的。都是720个。这就是像素点。就可以把这个理解像素点。
定义： px是pixel的缩写，即像素，是图像显示的基本单位，代表屏幕上的一个点。
特点：
固定大小： 在不同设备上，一个px的物理尺寸可能不同，但逻辑大小是固定的。
精确性高： 在设计稿有精确像素要求时，px能很好地实现设计效果。
缺乏响应性： 在不同屏幕尺寸和分辨率的设备上，使用px定义尺寸的元素可能会出现显示效果不佳的情况。比如，在高分辨率设备上可能显得过小，在低分辨率设备上可能显得过大。

上面的固定大小的解释是什么意思呢？再看看我们上面图中的设备，都是720P的分辨率，但是一个宽度是720cm，一个宽度是1440cm，他们横向都是720个像素点，怎么填充的满呢？我们就简单的理解，逻辑大小是固定的，这个逻辑大小就是720个像素点。物理尺寸的意思就是720cm，1440cm。那么，怎么填充满呢？简单的理解，你再看看我上面的点，是不是左边的点要小一点，右边的点要大一点？对，没错。就是这样，简单的理解，左边一个像素点的大小是1cm，右边一个像素点的大小是2cm。这样他们就填充满了。

我觉得上面这段话很重要，如果没读懂，多理解几遍。
我觉得上面这段话很重要，如果没读懂，多理解几遍。
我觉得上面这段话很重要，如果没读懂，多理解几遍。
适配的问题，都是从上面这段话衍生出来的。什么是适配问题呢？
以上面这两个设备为例子，我如果把字体设置为3px。
3像素从上面图就能看出来，两个一的宽度肉眼可见的不相同(理论上来说，右边一的宽度应该是左边一的2倍，这里没有画好)。这样不同的宽度，在不同的手机上显示出来的效果不一样，导致用户的体验不相同。这就需要适配。这还是不同的物理宽度。你在想想，如果相同的物理宽度，不同的分辨率。如下：
同设备不同分辨率
看上面这个图左边是低分辨率，右边是高分辨率。同样是3px，左边对应6cm，右边对应3cm。相对于整个屏幕来说，高分辨率下的内容就会整体变小。对于，用户来说，我靠，你这怎么看啊，字这么小，内容这么小，密密麻麻的。这就是问题。怎么解决这个问题呢？这就需要说到我们下面要说的rem了

3. rem

因为px响应性差，无法适配的问题。就出现rem。
定义： rem是相对于根元素（即元素）的字体大小而言的相对长度单位。它不受元素字体大小和父元素字体大小的影响，只受根元素字体大小的影响。

特点：
响应性好： 由于rem是基于根元素字体大小的相对单位，通过调整根元素的字体大小，可以轻松实现整个页面的缩放，使页面在不同屏幕尺寸的设备上都能有较好的显示效果。
计算相对复杂： 因为rem的值是基于根元素字体大小计算的，在进行页面布局和样式设计时，需要考虑根元素字体大小的设置，并进行相应的计算来确定元素的尺寸。

默认情况下，html根元素默认字体大小为16px。所以默认情况下1rem=16px。这也只是默认情况下的结论。根元素的字体大小可以改。
rem响应性好，那么，问题来了，怎么做适配呢？光口说是没有用的。放到后面移动端适配来说。这里只用记住rem是相对于html根元素的字体的一个相对单位就行了。

4. 移动端适配

核心要点就是一句话：保证比例不变，以不变应万变。
<a class= rem适配" />
把上面这个图看明白了，就搞懂了rem适配了。
无非稍微有点绕的就是：1倍屏的75x37.5 和 2倍屏的150x75 为啥显示的是一样的？你再想想前面说的px和物理尺寸的关系。想明白就可以了
再来说说移动端适配，移动端的适配像我们项目里面用的vant框架。我们写布局的时候，都是设置的px，为什么它能适配呢？因为它把px先转成了rem(这一步是框架做的)，然后，再其他手机上面显示的时候，就是rem适配了。