首先给大家老生长谈的介绍一下什么是rem, 什么是em.
em是相对长度单位,
- em的值并不是固定的;
- em会继承父级元素的字体大小。
rem是CSS3新增的一个相对单位,而rem与em的最大区别是:
- rem是相对于HTML的根元素
- em相对于父级元素的字体大小。
而通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。
废话不多说,直接上代码
//按照宽度375图算, 1rem = 100px;
(function (win, doc) {
function changeSize() {
doc.documentElement.style.fontSize = doc.documentElement.clientWidth / 3.75 + 'px';
console.log(100 * doc.documentElement.clientWidht / 3.75)
}
changeSize();
win.addEventListener('resize', changeSize, false);
})(window, document);
有些人可能会迷糊你这个是375的屏,如果我是750的屏应该如何修改呢? 其实这个是新手很容易陷入的一个误区.我屏幕换了这个比例是不是也改变了啊.
其实这个是不会的,这个最初的初始值是按照UI给你提供的设计稿来设置的,如果说rem我转换的太麻烦了,我还是喜欢1px 这样的设置,也没有问题,按照375的屏计算的话, 获取到屏幕的宽度 / 375 .然后在把得到的值赋值给根字体就可以了,这样1rem等于1px.就可以去设置了.
总而言之呢,这个具体把rem设置成多大,根据你的喜好和习惯来.你只需要关心三个点:
- 赋值到根字体上面: doc.documentElement.style.fontSize
- 获取屏幕的宽度: doc.documentElement.clientWidth
- rem的比例是多少: 3.75
根据上面这个设置下来 就可以得到,屏幕宽度为375 / 3.75 = 100;
在把这个100赋值给根字体.就得到了 在375屏幕宽度下1rem == 100px.
如果大家有任何疑问都可以随时在评论区留言指正.我会在第一时间回复大家或修改.