ElementUI 内容-elementui rem

一、解决方案简述

在使用ElementUI进行页面开发时，为了实现更灵活的响应式布局和适配不同屏幕尺寸，采用rem作为单位是一个很好的选择。通过将html元素的字体大小设置为一个基准值（一般以6.25%为基础），然后其他元素的大小、间距等都基于这个基准值用rem来表示，从而达到根据不同屏幕宽度调整元素显示效果的目的。

二、具体实现方式

1. 设置html根元素字体大小

我们可以利用JavaScript代码根据屏幕宽度动态设置html元素的字体大小。以下是具体的代码：

```javascript
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
// 这里假设设计稿是750px宽，根据实际情况修改
if(clientWidth >= 750){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};

if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);
```
这段代码获取文档和窗口对象，定义了一个recalc函数用于计算并设置html元素的字体大小。它会根据当前屏幕宽度与设计稿宽度的比例来确定字体大小，并且监听屏幕旋转或大小改变事件以便及时更新。

2. 在ElementUI组件中使用rem

例如我们使用Button按钮组件时：
```html

点击我

export default {

}

```
这里我们将按钮的内边距和字体大小都用rem来表示，这样就能随着html元素字体大小的变化而变化了。

三、其他思路

1. 使用postcss - px - to - rem插件

如果项目中有大量的样式文件，在编写时仍然习惯用px单位，那么可以借助postcss - px - to - rem插件。安装该插件后，在vue.config.js中配置如下：
javascript module.exports = { css: { loaderOptions: { postcss: { plugins: [ require('postcss-pxtorem')({ rootValue: 16, //换算的基数 propList: ['*'],//需要转换的属性，*表示全部 selectorBlackList: ['.ignore','body'] //忽略的选择器 }) ] } } } }
这样在编写样式时就可以直接使用px，构建时会自动转换成rem。