vue中怎么使用rem替换px

lewis 6年前 (2019-03-20) 阅读数 8 #程序编程

文章标签 rem替换px

在Vue中使用rem替换px的步骤如下：
1. 在`index.html`文件中设置根元素的字体大小为屏幕宽度的1/10。

2. 在`main.js`文件中添加监听窗口大小变化的事件，并重新计算根元素的字体大小，例如：
```javascript
window.addEventListener('resize', function() {
document.documentElement.style.fontSize = calc(100vw / 10);
});
```
3. 在需要使用rem单位的组件中，根据设计稿的尺寸设置对应的样式。

这样，Vue组件中的样式就会根据根元素的字体大小进行自适应，实现了rem替换px的效果。