ElementUI 说明_elementui rem
解决方案简述
在使用ElementUI进行开发时，为了实现页面的响应式布局和更好的适配不同设备，采用rem作为单位是一个非常有效的解决方案。通过设置html元素的字体大小为基础值，再利用less/sass等预处理器或者js动态计算其他元素的尺寸，可以让页面元素根据屏幕大小按比例缩放。
使用CSS预处理器实现
如果项目中使用了Less或Sass等预处理器，可以定义一个基础的rem函数来方便换算。
less
// Less示例
@base_font_size: 16px;
.rem(@px) {
@rem: unit(@px / @base_font_size, rem);
@rem;
}
然后在使用ElementUI组件样式的时候就可以这样：
less
.el-button {
font-size: .rem(24); // 会编译为font-size: 1.5rem;
}
这种方式的好处是在编写样式的时候仍然可以使用熟悉的px单位，而最终会被转换成rem单位，而且可以在一处修改基础字体大小，所有地方都会相应变化。
使用JavaScript动态调整
对于一些需要更灵活控制的情况，可以通过JavaScript来动态调整html元素的字体大小，从而影响整个页面的rem计算。
javascript
function setRem() {
const html = document.documentElement;
let clientWidth = html.clientWidth;
if (!clientWidth) return;
if(clientWidth >= 750){
html.style.fontSize = '100px';
}else{
html.style.fontSize = clientWidth / 7.5 + 'px';
}
}
window.onresize = function() {setRem()};
window.onload = function() {setRem()};
这段代码会在页面加载和窗口大小改变时执行，根据屏幕宽度动态设置html元素的字体大小。这里的7.5是按照设计稿宽度750px来设定的比例，可以根据实际需求调整。
结合ElementUI配置
ElementUI本身也支持定制主题，在项目的element-variables.scss（如果是sass）或element-variables.less（如果是less）文件中，可以直接覆盖默认变量，将其中涉及到尺寸的变量值由px改为rem，例如：
less
// less 示例
@font-size-base: .rem(16); // 基础字体大小
@border-radius-base: .rem(4); // 圆角半径
这样做可以确保所有的ElementUI组件都能以rem为单位进行展示，进一步提高了页面的灵活性和响应性。同时要注意的是，当采用这种方式时，要确保项目中已经正确设置了rem的基础计算逻辑，如上述提到的通过预处理器或者JavaScript的方式。
