小白与小黑两个好朋友,他们针对移动端rem展开了一系列的讨论。。。。
小白: 小黑,什么是rem
小黑: 你连这都不懂,叫爸爸我就告诉你
小白: 爸爸
小黑: rem是相对于根元素字体大小的单位
小白: 你这整的什么回答啊,我还是不知道啥意思?
小黑: 你是真的哈皮啊,问你个简单问题,你知不知道移动端开发的时候因为机型尺寸不一样导致的兼容性问题?
小白: 我肯定知道啊,前端时间就遇到了,现在还不知道怎么解决呢。我把尺寸写成固定的了,在不同机型上导致有的超出不显示,有的显示很小,看不清可把我愁死了。难不成rem可以解决这个问题?
小黑: 不错,你在开发的时候有没有想过,如果我写的尺寸是相对于一个值的百分比,并且这个值在不同的机型上是变化的,是不是就解决你说的问题了?
小白: 好像是的啊,你怎么这么聪明呢?
小黑: 我是你的爸爸啊
小白: 那我应该按照什么值去进行参考啊?
小黑: 你是不是个哈皮,上面不是说了吗,根元素的字体大小
小白: 那我代码应该怎么写呢?
小黑: 你就不能自己想一想?
小白: 爸爸
小黑: 看在你这么诚心的份上我就告诉你吧
px转化rem的函数
refreshRem(desW) { var winW = document.documentElement.clientWidth || document.body.clientWidth; document.documentElement.style.fontSize = (winW /desW)* 100 + 'px' },
监听页面的变化 动态调整html的font-size的大小
window.addEventListener('resize', this.refreshRem(375));
小白: 那个375是啥意思啊,我不清楚啊
小黑: 375是iphon6的尺寸啊,初始可以按照iphone6的标准去划算,然后根据不同的机型去调整
小白: 那个100代表的是啥啊
小黑: 100代表的是rem和px的对应关系,1rem等于100px,换算的时候方便啊
小白: 那我长度为100px,我在写css的时候是不是就可以写为1rem啊
小黑: 不错,出师了