《elementui消息_elementui rem》

解决方案简述

在使用ElementUI时，为了实现良好的移动端适配以及优雅的消息提示功能，采用rem布局单位来确保元素的尺寸能根据屏幕大小灵活调整，并且正确地使用ElementUI的消息组件。这有助于提升用户体验，使页面在不同设备上都能有较好的显示效果和交互体验。

基于rem的消息组件适配

1. 引入并配置rem

需要在项目中引入rem相关设置，可以通过安装postcss - px - to - rem插件来实现px到rem的转换。
javascript
// postcss.config.js
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5, // 根据设计稿宽度除以10得到根字体大小，这里假设设计稿宽度为375px
propList: ['*']
}
}
}

然后，在项目的入口文件（如main.js）中设置html标签的字体大小：
javascript
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
window.onresize = function() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
};


2. 使用ElementUI消息组件

ElementUI提供了Message消息提示组件，可以方便地进行消息展示。
```javascript
import { Message } from 'element - ui';

export default {
methods: {
showMessage() {
Message({
message: '这是一条消息',
type: 'success', // 可选值还有warning、error、info等
duration: 2000, // 消息显示时间
showClose: true // 是否显示关闭按钮
});
}
}
}
```

其他思路

1. 直接使用vw单位

对于一些简单的项目，也可以直接使用vw单位来设置元素尺寸，它相对于视口宽度，1vw等于视口宽度的1%。不过这种方式可能不如rem灵活，特别是在处理复杂的嵌套布局时。
例如设置一个消息框的宽度：
css
.message - box {
width: 80vw;
}


2. 结合媒体查询与rem

可以在不同的屏幕尺寸下通过媒体查询重新定义html标签的字体大小，从而影响rem计算的结果。例如：
css
@media screen and (max - width: 600px) {
html {
font - size: 30px;
}
}
@media screen and (min - width: 601px) and (max - width: 900px) {
html {
font - size: 40px;
}
}

再配合ElementUI消息组件的样式修改，可以更好地适应不同设备。