【前端基础4.0】如何做一个自适应的方块
2019-03-24 本文已影响65人
hijackli
文/Jack同学
现在响应式布局越来越重要，适应多终端多设备要求也越来越多。自适应元素在开发过程中经常碰到，下面写一个常用到的自适应方块的写法。
我们在开发过程中经常使用百分比来自适应元素。
- 请看结构：
<body>
<div class="wrapper">
<div class="box"></div>
</div>
</body>
- 接着样式：
html,body {
width:100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
}
.box {
width: 30%;
height: 30%;
border: 1px solid red;
}
- 这样我们得到如图：
不是方块
-由于设备的宽高不定，设置百分比显然得不到想要的方形，如果固定宽高又达不到自适应的要求。
- 下面这个方法可以解决这个问题。
html,body {
width:100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
}
.box {
width: 30%;
height: 0;
padding-top: 30%;
border: 1px solid red;
}
-
如图：
自适应方块
-
上面我把元素的
height设置为0，padding-top设置为30%，从而得到想要的，为什么呢？难道padding-top是相对于自身宽度来设置的吗？ -
其实原因确实是相对与宽度设置的，但不过是相对于父级的宽度设置的，所以子级的横向和纵向距离永远相等，并且设置的是百分比，也同样自适应。
-
这样一个自适应方块就完成了，同样的给元素设置
border-radius: 50%;也会得到一个自适应圆。
