一般我们在研发流媒体平台的时候,会做个手机界面的适配,保证在手机上也可以对平台进行浏览。在适配手机的过程中,由于操作系统不同,我们总会进行些修改,通常都需要进行多次的适配才能适配成功。
本文我们就来讲一下EasyGBS适配手机,或者缩小屏幕的时候,界面表格出现高度不对的情况:
最后一列为fixed属性时,高度会出现未占满父元素的整个高度,因此会出现一条灰线,导致视觉上适配出问题。
在标签上加一个class="table-fixed"类名并在css中增加如下样式:
注意:vue组件中,在style设置为scoped的时候,里面再写样式对子组件是不生效的,如果想让某些样式对所有子组件都生效,可以使用 /deep/ 深度选择器。
调整之后,适配正常的画面如下图所示: