PC端屏幕自适应(终极版)

最新推荐文章于 2024-08-27 16:31:14 发布

huoyueyi

最新推荐文章于 2024-08-27 16:31:14 发布

阅读量571

点赞数 8

文章标签：前端

本文链接：https://blog.csdn.net/kyrie_mvp/article/details/134871760

版权

最终效果 : 切换任意屏幕缩放尺寸 , 拖动屏幕也自适应

存在的问题 : 前段时间我给父盒子flex , 子盒子min-width+flex:1 这样实现了PC端自适应 , 但存在一定的问题 , 因为通过给子盒子的宽度固定值 , 当屏幕缩放放大后总不能完全兼顾 , 效果不够完美

简而言之 , 存在以下这样的问题

代码实现：媒体查询 + 子盒子width:calc

<style lang="less" scoped>

.model {                           // 这是整个屏幕
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;  

  .model_box {                  // 这是父
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 30px;
    padding: 20px 90px 20px 90px;

    .model_box1 {             // 这是很多个子
      background: #1e1e1e;
      flex-shrink: 0;
      border: 1px solid #3f3f3f;
      border-radius: 4%;
      margin: 10px;
    }


 // 一行
  @media screen and (max-width: 850px) {
    .model_box .model_box1 {
      width: 100%;
    }
  }

  // 二行
  @media screen and (min-width: 850px) and (max-width: 1180px) {
    .model_box .model_box1 {
      width: calc(50% - 22px);                        // 减22px因为边框和外边距
    }
  }

  // 三行
  @media screen and (min-width: 1180px) and (max-width: 1800px) {
    .model_box .model_box1 {
      width: calc(33.33% - 22px);
    }
  }

 // 四行
  @media screen and (min-width: 1800px) and (max-width: 1900px) {
    .model_box .model_box1 {
      width: calc(25% - 22px);
    }
  }

// 五行
  @media screen and (min-width: 1900px) and (max-width: 2500px) {
    .model_box .model_box1 {
      width: calc(20% - 22px);
    }
  }

  // 六行
  @media screen and (min-width: 2500px) and (max-width: 3900px) {
    .model_box .model_box1 {
      width: calc(16.66% - 22px);
    }
  }

  @media screen and (min-width: 3900px) {
    .model_box {
      width: 3900px;                                //超过3900px后就将父设为3900px
    }
  }