每日一题（开开森森学前端之REM）

前言

大家好，本人来在掘金待了有3个多月了，决定跟随前端大佬们的步伐，故决定每天一题记录自己的成长轨迹，由于水平有限，对于文章中出现的问题还请大佬们指正。

先来瞄一眼问题

面试官一脸和蔼的问：请阐述下你理解的REM

反正我当时的反应是：

！如果你和我一样，那么就接着跟我一起愉快的学习rem吧！

可以看到本题考查的知识点其实考察了以下知识点

• 你对屏幕的逻辑分辨率和物理分辨率的理解
• 你对rem的原理的理解
• viewpoint

分层逐一攻破

概念

1.物理分辨率的概念：物理分辨率其实就是说屏幕实际的大小，大的屏幕同时必须要配备高的分辨率，也就是这个尺寸下可以显示多少个像素点，显示的像素越多，就可以更清晰。 2.逻辑分辨率的概念：就是手机的物理分辨率用程序里的单位描述出来的结果就叫做逻辑分辨率

viewpoint(视口)

在手机上，视口与移动端浏览器的宽度不再关联，而是完全独立的了。我们称其为布局视口。

理想视口

当我们将布局视口的宽度设置成屏幕的宽度，就保证了页面中CSS像素点的恒定。 这里就用到了移动端适配常用的 这个标签可以保证在移动端设备中，页面的宽度与屏幕宽度相同。

弄清了上面的预备知识点后我们接下来看重头戏！

rem

rem，通过计算或者JavaScript获取到设备像素的比例，确定根元素的字体像素，然后所有单位根据根元素字体像素进行rem设置，确定大小。而基础rem会根据设备变化而变化。

方案是将整个页面宽度分成100份，每10个单位宽度作为1rem，假如拿到的视觉稿是750px的，那么1rem就代表75px。这样得到的比例系数就是75/750，也就是每次在进行设计稿到CSS的转换的时候，只需要对设计稿的像素值/10就可以得到对应的rem值。

总结

好啦这就是今天rem的相关知识了，大家共勉！

大佬们如果发现了文中的错误，及时在评论区指出，我会及时修改！

如果觉得对您有用请点个赞，谢谢大佬！