“约见”面试官系列之常见面试题第二篇说说rem（建议收藏）

目录

 

1.什么是rem?

2.为什么要用rem(rem有什么优点)？

怎样使用rem？

---

1.什么是rem?

rem（font size of the root element）是指相对于根元素的字体大小的单位。

2.为什么要用rem(rem有什么优点)？

都知道现在手机屏幕分辨率越来越多了，假设我们的网页需要适配的iPhone4（320px），iPhone6(375px)，iPhone6 Plus(414px)。

我们的需求是，当用户浏览网页时，根据屏幕的尺寸，来向用户展示更适合用户的文字、图片、按钮大小。

在rem概念没引入前我们的做法是，以最小的屏幕（iPhone）做一版数据出来，然后通过js去控制viewport 的 initial-scale （网页缩放比例）。

早期【天猫】移动端也是用用这样的方法实现的。能满足我们的需求。缺点是：这样做会使得，因为initial-scale越来越大，相当于拉伸网页，而使得在大屏幕的移动端设备下，文字、图片会变模糊。

为了更好的满足用户需求，让我们的工作更加完美，rem就有出现的必要了。下面比较一下 px em 和 rem 的优缺点：

    1.px：像素是相对于显示器屏幕分辨率而言的相对长度单位。pc端使用px倒也无所谓，可是在移动端，因为手机分辨率种类颇多，不可能一个个去适配，这时px就显得非常无力，所以就要考虑em和rem。

IE无法调整那些使用px作为单位的字体大小（Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)）。

    2.em（font size of the element）:相对值,它以父元素的大小为基准单位,来计算大小.所以很难把握.

    3.rem:root em,就是相对于根目录的em而不是相对于父元素,也就是说,它虽然是绝对值,但是只是相对于根目录来说也就是html,它不会随着其它元素的改变而改变.也就是说,我们只要设定html的文字大小就可以了.而不用考虑其它因素.
    而且他还具有非常好的支持Chrome,Firefox,Safari,Opera,IE9+。IE6,7,8就只能使用px或者em了.

怎样使用rem？

rem是只相对于根元素htm的font-size，即只需要设置根元素的font-size，其它元素使用rem单位设置成相应的百分比即可。

一般情况下，是这样子使用的

1 html{font-size:62.5%;} 
    /*因为100%=16px，1px=6.25%，所以10px=62.5%，
这是的1rem=10px，所以12px=1.2rem。px与rem的转换通过10就可以得来*/
2 body{font-size:12px;font-size:1.2rem ;} 
    /*为了兼容IE的低级版本还要写font-size:12px,别忘了要写在rem的前面*/
3 p{font-size:14px;font-size:1.4rem;}

    在这里我要提到一点的就是,假如你要**用rem来设置行高边距**之类的单位.则需要在html中加入这么一句话:-webkit-text-size-adjust:none;来消除webkit的默认属性.否则在其它的地方rem不是以根目录作为基准值了.

移动端做适配的时候，可以使用这样的方法

方案一

@media screen and (min-width: 320px) {html{font-size:50px;}}
@media screen and (min-width: 360px) {html{font-size:56.25px;}}
@media screen and (min-width: 375px) {html{font-size:58.59375px;}}
@media screen and (min-width: 400px) {html{font-size:62.5px;}}
@media screen and (min-width: 414px) {html{font-size:64.6875px;}}
@media screen and (min-width: 440px) {html{font-size:68.75px;}}
@media screen and (min-width: 480px) {html{font-size:75px;}}
@media screen and (min-width: 520px) {html{font-size:81.25px;}}
@media screen and (min-width: 560px) {html{font-size:87.5px;}}
@media screen and (min-width: 600px) {html{font-size:93.75px;}}
@media screen and (min-width: 640px) {html{font-size:100px;}}
@media screen and (min-width: 680px) {html{font-size:106.25px;}}
@media screen and (min-width: 720px) {html{font-size:112.5px;}}
@media screen and (min-width: 760px) {html{font-size:118.75px;}}
@media screen and (min-width: 800px) {html{font-size:125px;}}

方案二

@media screen and (min-width: 320px) {html{font-size:312.5%;}}
@media screen and (min-width: 360px) {html{font-size:351.5625%;}}
@media screen and (min-width: 375px) {html{font-size:366.211%;}}
@media screen and (min-width: 400px) {html{font-size:390.625%;}}
@media screen and (min-width: 414px) {html{font-size:404.2969%;}}
@media screen and (min-width: 440px) {html{font-size:429.6875%;}}
@media screen and (min-width: 480px) {html{font-size:468.75%;}}
@media screen and (min-width: 520px) {html{font-size:507.8125%;}}
@media screen and (min-width: 560px) {html{font-size:546.875%;}}
@media screen and (min-width: 600px) {html{font-size:585.9375%;}}
@media screen and (min-width: 640px) {html{font-size:625%;}}
@media screen and (min-width: 680px) {html{font-size:664.0625%;}}
@media screen and (min-width: 720px) {html{font-size:703.125%;}}
@media screen and (min-width: 760px) {html{font-size:742.1875%;}}
@media screen and (min-width: 800px) {html{font-size:781.25%;}}
@media screen and (min-width: 960px) {html{font-size:937.5%;}}

方案三

var designWidth = 640, rem2px = 100;
document.documentElement.style.fontSize = 
  ((window.innerWidth / designWidth) * rem2px) + 'px';

方案四

var designWidth = 640, rem2px = 100;
document.documentElement.style.fontSize = 
  ((((window.innerWidth / designWidth) * rem2px) / 16) * 100) + '%';

这里的转换可以根据自己的需要进行计算设置，并不是规定死的，比如你可以设置1rem=10px，也可以设置1rem=100px。
关于这四个方案的理解和改进，请点击下面的链接，里面讲的很清楚~：
这样子就能做到仅仅改变html的字体大小，让其他字体具有“响应式”喽。

本面试题为前端常考面试题，后续有机会继续完善。我是歌谣，一个沉迷于故事的讲述者。

欢迎一起私信交流。

“睡服“面试官系列之各系列目录汇总（建议学习收藏）