关于前端面试遇到的问题值类型和引用类型,1rem等于多少像素

一、值类型和引用类型

var a = 5
function b(x){
    x=6
}
b(a);
console.log(a) // 5

当a为值类型:数值,布尔值,String,null,undefined时,不会改变原变量a的值,当a为引用类型:对象、数组、函数。a的值会被改变;

当你传递对象的时候,其实传递的只是引用,实际地址指向的都是一个对象,所以更改会影响原对象,而值类型传的是值,所以不会改原来的变量!

参考链接:https://www.cnblogs.com/chenwenhao/p/7009606.html

 二、关于1rem等于多少像素的问题

有遇到过这样一个面试题:在html{font-size:20px;}的前提下,1rem等于多少PX?假如有个750PX的图,里面宽度为100px的盒子,写页面的时候该写多少像素。

很多人觉着这个问题条件不够!但是其实rem是一个相对值,相对于html的font-size属性来的,和设计图并没有关系

html{font-size:20px}
1rem = 20px;

html{font-size:40px}
1rem = 40px;

所以这个题目的答案是:在html{font-size:20px;}的前提下,1rem = 20px,而100px的盒子在页面上应该写5rem,和多大的设计图没有关系!

也许你会问了,要是这么简单,那我为什么写自适应的时候,这个值要算半天,还不知道要怎么除!

其实,在html{font-size:20px;}的前提下,1rem = 20px,而100px的盒子在页面上应该写5rem,这个时候是不自适应的,意思是在页面上写了 5rem就是写死了100px的意思!

怎么实现自适应呢,就是你用JS在页面宽度变化的时候不停的修改html的font-size属性,font-size变了比如变成40px,这个时候5rem的就相当于5*40 = 200px了;

设计图大小的作用就是,比如750px的设计图,盒子宽度100px,你想用盒子宽度100px/20的比例写5rem,那意思是750宽度的页面的html{font-size:20px;},500宽度的页面的html{font-size:13.333333px;},这个font-size的值 = (页面宽度/设计图宽度)*20

em和rem的不同是em相对于本身的font-size计算的。

原文地址:https://www.cnblogs.com/zhujunislucky/p/10251552.html