响应式布局项目修改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  专业微信小程序开发
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。