为什么课间中设置的每个项目都是等比例缩放的
如题，我自己试着写一下，发现虽然实现了断点的切换，但是里面的项目的宽度一直都在变化，不像老师写的那样都是等比例缩放的正方形，这是为什么？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin:0PX;padding: 0PX;}
.col{height: 200px;width: 200px;background-color: burlywood;margin: 5px;}
.row{display: flex;width: 100%;background-color: grey;flex-wrap: wrap;}
/*设置断点*/
@media (max-width:576px){
.col{width: 100%;}
}
@media (min-width:577px) and (max-width:768px){
.col{width: 50%;}
}
@media (min-width:769px) and (max-width:992px){
.col{width: 25%;}
}
@media (min-width:993px) and (max-width:1200px){
.col{width:16.67%}
}
@media (min-width:1201px){
.col{width:8.333%}
}
</style>
</head>
<body>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</body>
</html>
我设置的原始div项目每个也是正方形，按道理也应该都是等比例缩放啊，结果是数目多的时候宽度越来越小
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星