移动端适配之百分比适配
前面简单了了解了一下移动端,包括移动端的设备独立像素,物理像素,渲染像素以及像素比(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适配,稍后文章会详细介绍)
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-6-21，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读