响应式布局项目修改el-header与el-footer的高度值

最近项目使用element ui的响应式布局, 其中el-header与el-footer的高度在不同设备不能自适应调整，于是想手工调整，试了无数个css方法竟然不行：
(注：在el-header上有height属性，可以设置高度，本文讲的是用css方法设置）

<el-container>
<el-header class='m-header'></el-header>
<el-main></el-main>
<el-footer></footer>
</el-container>

其中el-main可以设定高度，为什么el-header与el-footer就不行呢？这个问题折腾了我大半天，在F12下查看样式，原来有一个element.style, 据说这种样式往往用js动态设置的，如下：

element.style{
height:60px;
}

这个样式即使用/deep/也覆盖不了, 但用important的方式可以进行修改，如下：

 .m-header {
    height: @rowheight*10 !important;
  }

另外，附上不同设备宽度下的样式切换方法：

/*移动端*/
@media screen and (max-width: 767px) {
}

/*iPad 端 (这里用区间竟然不行，只对直接为768, 未解之谜*/
@media screen and (min-width: 768px) {
}

/*网页端 （包括了ipad pro及pc端)*/
@media screen and (min-width: 769px) {
}
//易国轩  2020-08-09  专业微信小程序开发