移动端适配之百分比适配

前面简单了了解了一下移动端,包括移动端的设备独立像素,物理像素,渲染像素以及像素比(DPR)等相关知识!接下来简单介绍一个比较简单的移动端适配方案!

今天介绍的是百分比适配,顾名思义,就是宽度使用百分比进行替代传统的具体像素适配!

接下来看一下百分比适配的问题

优缺点：

1.百分比不好计算

2.需要确定父级的宽度,百分比依照父级计算

3.宽度可以很好适配，高度无法确定，

4.可能会使形状严重改变！

（IP6下可能是正方形，6p，其他设备可能就是变形，影响用户体验）

案例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>百分比移动端适配</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
		<style>
			html,body{
				overflow-x: hidden;
			}
			*{
				padding:0;
				margin: 0;
			}
			.div{
				float: left;
				width:calc(100%/6);
				height:100px;
			}
			.div:nth-child(1){
				background-color: #ff0036;
			}
			.div:nth-child(2){
				background-color: paleturquoise;
			}
			.div:nth-child(3){
				background-color: greenyellow;
			}
			.div:nth-child(4){
				background-color: deepskyblue;
			}
			.div:nth-child(5){
				background-color: darkorange;
			}
			.div:nth-child(6){
				background-color: fuchsia;
			}
		</style>
	</head>
	<body>
		<div class="div">1</div>
		<div class="div">2</div>
		<div class="div">3</div>
		<div class="div">4</div>
		<div class="div">5</div>
		<div class="div">6</div>
	</body>
</html>

简单来说,宽度很容易进行实现,但是高度的适配严重无法匹配!比如在5%的宽度在不同设备指定的不同的宽度,相对于高度不易控制!那么这个百分比适配存在什么必要,通常百分比适配结合其他的适配方案(例如viewport适配以及移动适配方案终极方式rem适配,稍后文章会详细介绍)