移动端布局的时候会遇到一些将元素定位,组合成一个图形来呈现。此时就需要给这些元素加一个盒子(div.box),以便在不同视口呈现同样的效果。
这个盒子需要是一个和视口等宽的正方形,可以用js来写高度,但是有一种更简单的方法,使用padding-botttom来实现,代码如下:
.box{
width:100%;
border:1px solid #000;
padding-bottom:100%;
}
移动端布局的时候会遇到一些将元素定位,组合成一个图形来呈现。此时就需要给这些元素加一个盒子(div.box),以便在不同视口呈现同样的效果。
这个盒子需要是一个和视口等宽的正方形,可以用js来写高度,但是有一种更简单的方法,使用padding-botttom来实现,代码如下:
.box{
width:100%;
border:1px solid #000;
padding-bottom:100%;
}