使用@media解决适配问题

问题:手机端登录没有适配

最开始想到的获取窗口的宽度来弄，发现麻烦
找了elementUl的基于断点的隐藏类发现可以修改css来解决
最终找到了css中的@media

解决方式

针对部分css采用@media适配
哪里需要修改哪里，最小修改原则

以前代码

 .img_login{
    position: absolute;
    width: 491px;
    height: 552px;
    z-index: 2;
  }

  .div_user{
    width: 826px;
    height: 506px;
    background-color: white;
    position: relative;
    top: 21px;
    left: 78px;
    border-radius: 24px;
    display: flex;
  }

  .padding{
    width: 413px;
    height: 506px;
  }

修改后的代码

  // 解决适配问题 900px以上的显示没问题，900以下适配一下就好了
  @media screen and (max-width: 900px) {
    .img_login{
     width: 0px;
     height: 0px;
   }
   .div_user{
    width: 90%;
    height: 506px;
    background-color: white;
    position: relative;
    top: 21px;
    left: 5%;
    border-radius: 24px;
    display: flex;
    justify-content: center;
    transition:translateY(-50%)
  }
  .padding{
    width: 0px;
    height: 0px;
  }
}

@media (min-width: 900px) {
  .img_login{
    position: absolute;
    width: 491px;
    height: 552px;
    z-index: 2;
  }

  .div_user{
    width: 826px;
    height: 506px;
    background-color: white;
    position: relative;
    top: 21px;
    left: 78px;
    border-radius: 24px;
    display: flex;
  }

  .padding{
    width: 413px;
    height: 506px;
  }
}

效果图：

• pc端
  
• 手机端