ElementUI 用处_elementui rem

一、解决方案简述

在现代Web开发中，ElementUI是一个功能强大且易于使用的UI库，它能快速搭建美观的用户界面。而使用rem单位可以实现页面布局的响应式设计，让不同设备上的显示效果更加和谐统一。将二者结合起来，可以在创建出漂亮界面的确保其在各种屏幕尺寸下的良好适配。

二、ElementUI结合rem的具体应用

1. 引入ElementUI与设置html字体大小

在项目中引入ElementUI，以Vue CLI项目为例：
html
<!-- 在index.html中引入 -->
<link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css" rel="external nofollow" >

然后需要设置html元素的字体大小为基准值，方便后面计算rem。这可以通过JavaScript来动态设置，根据屏幕宽度确定合适的基准字体大小。
javascript
// 在main.js或者专门的js文件中
function setRem() {
const html = document.documentElement;
let width = html.clientWidth > 750 ? 750 : html.clientWidth; // 设定宽度为750px
html.style.fontSize = width / 19.2 + 'px'; // 19.2是根据设计稿宽度（如384px）和1rem=20px推算而来
}
setRem();
window.onresize = function() {
setRem();
};


2. 使用ElementUI组件并设置样式

现在可以正常使用ElementUI组件，并且给组件添加样式时使用rem单位。
```html

.box{
padding: 2rem;
}
.el-button{
font-size: 1.2rem;
}

</p>

<h2><h2>三、其他思路</h2></h2>

<h3>1. 使用CSS预处理器</h3>

<p>如果项目中使用了像Sass这样的CSS预处理器，可以定义一个变量用于表示html的字体大小，这样在修改基准字体大小时会更方便。
```scss
$base-font-size: 16px;</p>

<p>html{
    font - size: $base-font-size;
}</p>

<p>// 然后按照上面的方法用JavaScript动态修改这个变量对应的值

2. 利用postcss - px - to - viewport等插件

对于已经写好的大量px单位的样式，可以借助postcss - px - to - viewport等插件自动转换成rem单位，减少工作量。安装插件后按照官方文档配置好参数即可。

通过以上方法，我们能够很好地将ElementUI与rem单位相结合，既利用ElementUI丰富的组件库构建界面，又保证页面布局在不同设备上都能有良好的展示效果。