weixin_58412143 2022-03-02 16:09 采纳率: 91.6%
浏览 508
已结题

如何实现vue根据屏幕大小自适应宽高缩放

问题情况展示

img


css样式

img

控制台层级关系

img

ps:使用了插件使得现在的代码里px单位已经转为了rem
这里是宽度自适应的情况——(使用了媒体查询)


```html
@media (min-width: 1440px) and (max-width: 1680px){
 #bottomLeft{//一些页面的盒子
      width: 1vw !important;
    }
  #bottomCenter {//一些页面的盒子
    width: 35vw !important;
    margin-left: 7vw !important;
  }
  #bottomRight {//一些页面的盒子
      width: 36vw !important;
  }
  #centerLeft1{//一些页面的盒子
    width: 1vw !important;
  }
  #centerRight1 {//一些页面的盒子
      width: 36vw !important;
  }
  #centerRight2 {//一些页面的盒子
    width: 47vw !important;
  }
  .top{//一些页面的盒子
    width: 31vw !important;
  }
  .center{//一些页面的盒子
    width: 36vw !important;
  }
  .bottom{//一些页面的盒子
    width: 36vw !important;
  }
  }/*>=1440的设备*/
  @media (min-width: 1680px)and (max-width: 1920px){
    .bg{
      // width: 100vw !important;
      // height: 100vh !important;
      }
    #bottomLeft{//一些页面的盒子
      width: 1vw !important;
    }
  #bottomCenter {//一些页面的盒子
    width: 40vw !important;
    // width: 46.5vw !important;
    margin-left: 6.5% !important;
  }
  #bottomRight {//一些页面的盒子
      width: 31.5vw !important;
      // width: 28.5vw !important;
  }
  #centerLeft1{//一些页面的盒子
    width: 1vw !important;
  }
  #centerRight1 {//一些页面的盒子
      width: 31.5vw !important;
      // width: 28.5vw !important;
  }
  #centerRight2 {//一些页面的盒子
    width: 47vw !important;
  }
  .top{//一些页面的盒子
    width: 31vw !important;
    // width: 38vw !important;
  }
  .center{//一些页面的盒子
    // width: 36vw !important;
    width: 39.5vw !important;
  }
  .bottom{//一些页面的盒子
    width: 36vw !important;
  }
  }/*>=1680的设备*/
  @media (min-width: 1920px){
    #bottomLeft{//一些页面的盒子
        width: 1vw !important;
      }
    #bottomRight {//一些页面的盒子
        width: 29vw !important;
    }
    #centerLeft1{//一些页面的盒子
      width: 1vw !important;
    }
    #centerRight1 {//一些页面的盒子
        width: 29vw !important;
    }
    #centerRight2 {//一些页面的盒子
      width: 47vw !important;
    }
    .bg{
      // width: 100vw !important;
      // height: 100vh !important;
      }
      #bottomCenter {//一些页面的盒子
        width: 46.3vw !important;
        margin-left: 0.5% !important;
      }
      .top,.center,.bottom{//一些页面的盒子
        width: 44vw !important;
      }
  } /*>=1920的设备*/
  @media (min-width: 1940px){
    #bottomRight {//一些页面的盒子
        width: 31vw !important;
    }
    #centerLeft1{//一些页面的盒子
      width: 1vw !important;
    }
    #centerRight1 {//一些页面的盒子
        width: 31vw !important;
    }
      #bottomCenter {//一些页面的盒子
        width: 44vw !important;
        margin-left: -0.5% !important;
      }
  }

```

  • 写回答

1条回答 默认 最新

  • 张建宇. 2022-03-02 16:22
    关注

    你这是大屏吧,全屏不就完全展示了吗

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 3月17日
  • 已采纳回答 3月9日
  • 创建了问题 3月2日

悬赏问题

  • ¥15 vba参数转c++ SAFEARRAY
  • ¥20 Win11测试yolov4,“找不到nvcuda.dll”怎么办?
  • ¥15 simulink绘制bode图
  • ¥15 php_network_getaddresses: getaddrinfo failed: Name or service not known
  • ¥15 用msg发消息出现的问题
  • ¥15 unity3d机械臂
  • ¥20 判断两个表是否完全相同
  • ¥20 工控机出现散热器转一下停一下这种情况,是什么原因造成的
  • ¥15 双显卡,启动docker容器报错。
  • ¥15 想编写一个期货跨期套利的程序