新版视频流媒体平台EasyNVR编译过程中登录页面显示不全问题排查

继我们的国标GB28181流媒体服务器改版之后,RTSP协议视频流媒体平台EasyNVR的新版界面也在加紧研发,不久也将和大家见面了。上一篇我们分享了一个编译过程中的问题解决:EasyNVR更新版本后切换页面显示异常问题。本文我们继续来看下其他在版本更新的时候出现的问题。

我们在新版界面做好之后,会走一整套使用流程,确保每个环节都没有问题。在登陆的时候,发现我们的新版流媒体平台EasyNVR登录页面也出现了不适配的问题。

经过检查,发现页面适配错乱的时候,屏幕宽度是768以下的。当屏幕处于768以下时,页面布局发生改变,导致轮播图高度不够,显示不完全。

我们可以利用@media 媒体查询检测屏幕大小,当大小不对的时候,进行修正,给轮播图足够的高度,让轮播图显示正常。

以下是代码检查:

// 小屏适配
@media screen and(max-992px) {
  .login-box {
    overflow: visible;
  }
  .logoBox,
  .login-container {
    max- 480px;
    margin: 0 auto;
  }
}
@media screen and(max-480px) {
  .login-box {
     100% !important;
  }
  .logoBox,
  .login-container {
    .formBox {
      padding: 30px 0 !important;
    }
  }
}

原文地址:https://www.cnblogs.com/EasyNVR/p/13064279.html