文/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%;
也会得到一个自适应圆。
网友评论