问题原因
(1)在项目中,使用iview作为ui组件开发,使用vue作为前端框架;
(2)在人员管理界面,左边是部门树,右边是人员列表;
(3)当点击浏览器右上角的缩小按钮时,改页面出现人员列表右边部门缩放缓慢,并且超过了5秒钟,严重影响用户体验。
(4)调查原因中发现:使用flex布局进行自适应时,计算缓慢;再加上iview的表格组件在进行缩放时的宽度计算也要耗费一些时间,因此造成了上述问题的出现
解决方法
- 对于包裹部门树和人员列表的父级,放弃使用flex布局,改为block布局
- 对于部门树和人员列表采用float:left,实现左右布局
- 典型的左右布局,部门树左边固定宽度,右边使用calc计算宽度,至此该问题解决
简略代码如下
<div class='container'>
<div class='tree-left'>
</div>
<div class='person-list'>
<div>
<style>
.container {
display: block
}
.tree-left {
float: left;
width: 200px;
}
.person-list {
float: left;
width: calc(100% - 200px);
}
<style>
注意事项
calc计算宽度在ie低版本的浏览器下不适用;如果想要兼容ie浏览器,可查看如下链接地址,找到适合项目的方法
http://zh.learnlayout.com/flexbox.html
https://www.w3cplus.com/css/two-cloumn-width-one-fixed-width-one-fluid-width