移动端常用元素等比缩放原理

发表于 |

原理

使用伪元素进行百分比撑高，假如元素在设计稿的尺寸是100x150，那么伪元素的paddingTop就填充高/宽度，也就是150/100 * 100%，即可等比缩放。

HTML结构

1
2
3
4
5
6
<div class="test">
	<div class="inner"><div class="item">1</div></div>
	<div class="inner"><div class="item">2</div></div>
	<div class="inner"><div class="item">3</div></div>
	<div class="inner"><div class="item">4</div></div>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* 元素等比缩放方案 */
.test {
	font-size: 0;
}

.test .inner {
	display: inline-block;
	width: 25%;
	vertical-align: top;
	position: relative;
	background-color: rgba(255, 0, 0, .5);
}

.test .inner .item {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.test .inner:before {
	content: "";
	display: inline-block;
	padding-bottom: 100%;
	width: .1px;
	vertical-align: top;
}

.test .inner:nth-child(2n) {
	background-color: rgba(0, 0, 0, .5);
}