ElementUI 合集、elementui rem

解决方案简述

在现代前端开发中，ElementUI 是一个非常受欢迎的 Vue 组件库，提供了丰富且美观的 UI 组件。为了确保网页在不同设备上的显示效果一致，并且能够适应不同的屏幕尺寸，使用 rem 作为单位是一种常见的做法。介绍如何在使用 ElementUI 的项目中实现 rem 布局。

一、引入 ElementUI

确保已经在项目中正确引入了 ElementUI。可以通过 npm 或者直接使用 CDN 引入。

• npm 安装：npm install element-ui -S
• CDN 引入：
  ```html
  

</p>

<p>然后，在 main.js 中注册 ElementUI（如果是 npm 安装的话）：
<code>javascript
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);


二、设置 html 根元素字体大小

为了让 rem 能够生效，需要动态设置 html 根元素的字体大小。可以在项目的入口文件（如 main.js）中添加以下代码：

```javascript
// 动态设置根元素字体大小
function setRem() {
    const width = document.documentElement.clientWidth;
    const rem = width / 10; // 这里假设设计稿宽度为375px，则1rem等于37.5px
    document.documentElement.style.fontSize = rem + 'px';
}

// 监听窗口大小变化
window.addEventListener('resize', setRem);
setRem(); // 初始化调用

三、配置 postcss-pxtorem 插件

为了更方便地将 px 单位转换为 rem，可以使用 postcss-pxtorem 插件。安装插件：

bash
npm install postcss-pxtorem --save-dev


然后在 vue.config.js 中进行配置（如果项目使用的是 vue-cli 构建工具）：

javascript
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 16, // 换算的基数
propList: ['*'], // 表示所有的属性都要进行换算
selectorBlackList: ['.ignore', '.hairlines'], // 忽略的选择器
minPixelValue: 2 // 小于或等于2px不转换为rem
})
]
}
}
}
};


四、其他思路

1. 使用 sass 变量

如果项目使用了 sass 预处理器，也可以通过定义 sass 变量的方式来实现。例如，在全局的 sass 文件中定义：

scss
$root-size: 16px;</p>

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

然后在组件中使用：

scss
.my-component {
width: calc(100rem * 1px / #{$root-size});
}


2. 利用媒体查询

对于一些特殊的布局需求，还可以结合媒体查询来调整根元素的字体大小。例如：

css
@media (max-width: 768px) {
html {
font-size: 14px;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
html {
font-size: 16px;
}
}
@media (min-width: 1025px) {
html {
font-size: 18px;
}
}


以上就是在 ElementUI 项目中实现 rem 布局的方法，通过这些方法可以让页面在不同设备上都能有良好的显示效果。