每日一题（开开森森学前端之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的相关知识了，你们共勉！

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

若是以为对您有用请点个赞，谢谢大佬！