原理分析
- 巧用padding
- 巧用百分比
利用这2个小技巧，可以让你在移动端布局更加轻松。
例子一
<div class="parent">
<div class="child">div>
div>
复制代码
.parent {
position: absolute;
width: 50px;
height: 80px;
background: red;
}
.child {
padding-top: 20%;
background: green;
}
复制代码你们觉得child 的高度是多少呢？40px?不，是10px。怎么算呢？50px*0.2=10px;
结论：
padding-top的百分比大小是基于父容器的宽度来换算的。
问题二：padding-top的百分比大小是基于父容器的宽度来换算的？ 例如：
<div class="parent">
<div class="child">div>
div>
复制代码
.parent {
width: 50px;
height: 80px;
background: red;
}
.child {
position:absoulte;
padding-top: 20%;
background: green;
}
复制代码child没有高度，则说明不适用在绝对定位元素和固定定位上,应该是当元素自身是相对定位或者静态定位的情况下padding-top的百分比大小是基于父容器的宽度来换算的。
好了，举了几个例子有什么用呢？
例子二：
在移动端中，由于手机屏幕的差异性很大，我们很难用一套设计稿去适配所有机型，这时候就得取舍，怎么取舍呢？ 先判断设计稿中，有什么元素是一定要保留的，有什么元素可以允许变形或者删减的。 确定好功能性元素之后，我们用一个div容器,将子元素放到这个容器里面，父容器要保持好比例，防止变形。里面的元素基于设计稿的比例按照百分比的形式还原。然后只需要根据不同的屏幕缩放容器的宽度即可适配所有机型。
如何保持好容器的比例呢？ 平时我们的设计稿是640*1008;
想要绿色区域保持一定的比例，这时候就需要巧妙利用padding-top的属性。 再往容器里面丢一个wrap-container容器，然后就可以往容器里面用绝对定位的方式去布局。.red {
width: 10%;
padding-top: 10%;
position: absolute;
background: red;
}
.top-left {
top: 0%;
left: 0%;
}
.top-right {
top: 0%;
right: 0%;
}
.bottom-left {
bottom: 0%;
left: 0%;
}
.bottom-right {
bottom: 0%;
right: 0%;
}
.container {
width: 100%;
height: 100%;
}
.wrap-container {
width: 100%;
padding-top: 180%;
}
.main-container {
position: absolute;
width: 80%;
background-color: palegreen;
left: 50%;
transform: translate(-50%, -50%);
top: 50%;
}
复制代码
<div class="container">
<span class="top-left red">span>
<span class="top-right red">span>
<span class="bottom-left red">span>
<span class="bottom-right red">span>
<div class="main-container">
<div class="wrap-container">
div>
div>
div>
复制代码如果是小屏手机应该怎么办？ 这时候只需要改变绿色区域容器的宽度，确保不会跟红色重叠。
$(function () {
$(window).resize(function () {
var oH = window.innerHeight,
oW = window.innerWidth;
var rR = 10 / 18,
oR = oW / oH;
var rW = rR * oH * 0.8;
$('.main-container').width(rW);
})
})
复制代码例子三
帧动画可以动态改变比例，只需要控制容器的宽度。
.container{
position: relative;
width: 1000%;
}
.man{
width: 100%;
padding-bottom: 62.1%;
background-image: url(img/img.png);
background-size:500% 100%;
background-repeat: no-repeat;
animation: run .5s steps(5) infinite;
animation-timing-function:step-start;
}
@keyframes run
{
0% { background-position:0 0; }
25%{ background-position:25% 0;}
50%{ background-position:50% 0; }
75%{ background-position:75% 0;}
100%{
background-position:100% 0;
}
}
复制代码屏幕变小的情况下，帧动画的大小会随着变化，但是会保持比例。
分析：设定人物的比例大小，如果有多少帧就得设定多少倍，通过移动x轴的百分比改变背景图片。记得设置transition-timing-function Value:steps()模式，不然会平移。
结论
只要巧用padding这个属性，你可以在移动布局中，不需要使用height，完全可以通过宽度来控制高度的大小。这样只需要关心宽度的适配问题。当然如果要出现滚动条的话是需要设置高度的且只能用px。