css自适应小技巧 | 指尖上的记忆

css自适应小技巧:
<html>
 <head></head>
 <body>
  <div class="course-box-list">
        <!-- 整个box -->
        <div class="course-box" data-v-cb128327="">
            <!-- 封面图 -->
           <div class="course-avatar" data-v-cb128327="">
            <img src="http://academy.pj.test/upload/cover/2023-04-13/dfc1ab1cd137f0745866bc321f01a267.jpg" alt="" data-v-cb128327="" />
            <span class="certification-tag" data-v-cb128327="">Certification</span>
           </div>
            <!-- 统计信息 -->
           <div class="course-info" data-v-cb128327="">
            <p class="title white-space" data-v-cb128327="">fgdsgdfsgxcvcvx</p>
            <ul class="statistics" data-v-cb128327="">
             <li class="st-item" data-v-cb128327="">1 Videos</li>
             <li class="st-item" data-v-cb128327="">4 Article</li>
             <li class="st-item" data-v-cb128327="">6min</li>
            </ul>
            <div class="progress-box" data-v-cb128327="">
             <p class="percent" data-v-cb128327="">83% completed</p>
             <div class="bar" data-v-cb128327="">
              <div class="progress" data-v-cb128327="" style="width: 83%;"></div>
             </div>
            </div>
            <p class="join" data-v-cb128327="">Joined at 19/04/2023</p>
           </div>
        </div>
  </div>
 </body>
</html>


//关键样式
.course-box-list{
    max-width:768px
}

.course-box{
    width: 100%;//这里设置 100%,会和父级一样宽
    height: 100%;//这里设置 100%，那么它的高度就有子元素的高度撑起来

    .course-avatar{
        height: auto; //这个外层的 box的 高度设置为 auto，很有用，主要就是促使 子元素img 实现，等比缩放
        width:100%;
        position:relative;
        img{
           width: 100%; // 这个设置100%，会和父级的宽度一样
           height: 100%; // 这个设置100%，而父级设置的是 auto，那么相当于这里的 height 也为auto，那么就会让这个图片的宽高实现等比例缩放，避免了图像的拉伸或压缩，缩放比例由原图的宽高比决定。实现等比缩放以后，父级高度设置的 auto,那么最后父级的高度就由子元素的高度(这里是img)决定了
           max-width: 100%; //这个限制元素的最大宽度不超过其父元素的宽度。当父元素的宽度小于元素的最大宽度时，元素的宽度将会被调整，以适应父元素的宽度。但是这里其实用不到，因为设置了 width:100%，父子宽度一致。如果这里子元素
           设置 width:800px,那么当屏幕缩小的时候，比如缩小到 600px，那么页面就会出现滚动条，此时 如果设置了 max-width:100%，就不会有这个问题，因为子元素的宽度会被调整以适应父元素的宽度。
        }
        .certification-tag{
            width: auto; //这里没有直接设置宽和高，都设置为100%，以及相应的padding等属性，那么最后这个元素的宽高，就由其内容决定，效果就是，表现出像设计稿一样的效果
            height: auto;
            padding: 0.625rem;
            border-radius: 0.3125rem;

            background: rgba(0, 0, 0, 0.7);
            color: #fff;
            font-weight: 500;
            font-size: 0.6875rem;
            line-height: 2.1875rem;
            text-align: center;
            position: absolute;
            top: 0;
            right: 0;
        }
    }

    .course-info{
        //...
    }
}

//总结
上面代码样式，其实是一个经典的 自适应 布局方式，主用于手机适配，让页面看起来像设计稿的布局，但是也是有问题的，如果尺寸大小不按设计稿来做的话，样式大小其实还是有问题的，只是看起来像。
不过开始让我做的话，我可能会先设置这个 course-box 的宽高，当然了是rem单位。所以上面这种方式 适用于自由发挥的情况，没有设计稿约束，只是让最后的页面看起来像，而不关心尺寸大小。