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

如何实现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 CMAKE+VS2019+QT5.15.2组合进行二次编译
  • ¥15 nginx 配置静态html访问 ,后台登录时页面始终被重定向到登录页,无法访问到后台的静态html页
  • ¥20 自动登录的j2ee程序编译
  • ¥15 维纳滤波器的实验题及计算机实现,求解
  • ¥15 fluent模拟静态气体扩散
  • ¥15 java根据模板,生成word文档,需要带目录
  • ¥15 广告联盟的兜底广告是什么意思
  • ¥15 如何证明高斯噪声的包络公式
  • ¥150 寻找王者荣耀开发作者,合作或者解答
  • ¥15 关于cpci总线的几个问题,别用人工智能回答