如何在vue移动端项目中使用rem

Question

以前项目中动态控制html的字体大小, 让页面元素自适应不同机型的屏幕，
请教：用vue怎么实现这一功能，或者有其他什么好插件也期待您的推荐
在线等 多谢

Answer 1

在根目录的index.html动态设置基础像素的大小&nbsp;&nbsp;<script> &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;setRootFontSize()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*获取屏幕的宽度*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;width&nbsp;=&nbsp;document.documentElement.clientWidth&nbsp;||&nbsp;document.body.clientWidth&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*屏幕小于414px会改变基础像素，大于等于414px的屏幕基础像素为13px不变*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(width&nbsp;<&nbsp;414)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.documentElement.style.fontSize&nbsp;=&nbsp;width&nbsp;/&nbsp;375&nbsp;*&nbsp;13&nbsp;+&nbsp;'px' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.documentElement.style.fontSize&nbsp;=&nbsp;'13px' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;setRootFontSize()&nbsp;&nbsp;&nbsp;&nbsp;window.addEventListener('resize',&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setRootFontSize() &nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;false)</script>在scss文件中写一个mixin函数/*将px转换成rem*/ @function&nbsp;px2rem($px)&nbsp;{ &nbsp;&nbsp;@return&nbsp;$px&nbsp;/&nbsp;13&nbsp;+&nbsp;rem; }将文件写成公共的样式文件，或者用的时候引入以上做完直接使用px2rem(设置图的像素大小)做到动态控制了