装备自身的适配战略
ios和Android的适配战略是不一样的。
关于ios,一个装备含有越多的逻辑像素，那末这个装备也就越大，换句话说，ios的逻辑像素能够作为一个物理长度单元。运用的场景是如许的，用px单元设置了一个元素的大小，这个元素在差别大小的ios装备下实际上是一样大的。所以ios战略是更大的屏幕是为了显现更多的内容。临时将它称之为更多内容战略。
然则关于Android装备，大抵的状况是不论装备大小，包括的逻辑像素宽度都是360px。用px单元设置一个元素的大小，装备越大，它在装备上显现的也等比变大。所以Android的战略是，屏幕越大是为了让内容看起来更大。临时称之为更大内容战略。
个人认为ios的战略更加合理。然则由于我们没法猎取装备的物理尺寸大小，所以也就没有办法在Android的装备上面运用更多内容战略。所以我决议就在ios的装备上面实行ios的更多内容战略，而在Android的装备上实行更大内容战略。
ios的适配的战略完成
依据更多内容战略，我们会碰到两种状况
第一种是元素大小不随装备屏幕变大而变大，比方屏幕、图标、导航栏等，由于我们须要为用户显现更多的内容，这个时刻运用的单元是px。
第二种状况，元素的大小须要跟着装备的变大而变化。这类状况平常作用于容器元素。由于屏幕变大了，容器假如照样一样的大小就不相符显现更多内容战略。这类状况的完成比较复杂， 下面我们细致议论这类状况下的处理计划。
百分比
百分比这个单元是参照父元素大小的相对单元。实在百分比能够处理大部分题目。
我须要一个占有全部屏幕大小的容器，下面的代码能够圆满处理
.container {
width:100%;
height:100%;
}又或许我须要一个占有屏幕百分之五十的内容弹窗，至于高度就由内容决议吧
.dialog {
width:50%;
height:auto;
}对了它得居中，这也没什么题目
.dialog {
width:50%;
height:auto;
margin-left:-25%;
left:50%;
}然则，怎样涉及到高度，百分比的题目就显现出来了。比方我想让上面的弹窗的高度为屏幕高度的60%，至于内容过量就让它内部转动吧；
.dialog {
width:50%;
height:auto;
margin-left:-25%;
left:50%;
height:60%;
} 好像也没有什么题目，然则，假如我想让它高低居中
.dialog {
width:50%;
margin-left:-25%;
left:50%;
height:60%;
margin-top:-30%;
top:50%;
} 无法的发明它并没有居中，题目就出在maring-top 百分比所参照的是父级元素的宽度而不是高度。终究发明了一个百分比无计可施的一个点了。
转变一下需求，我们须要一个正方形的弹窗，弹窗的宽度照样请求50%；
.dialog {
width:50%;
margin-left:-25%;
left:50%;
height: ?%;
}我们试着做了，然则他的高度应当是多少呢，确切百分比无计可施了。
vw & vh
vw 是将当前屏幕的宽度分为一百份以后的长度
wh 是将当前屏幕的高度分为一百份以后的长度
这几乎是对百分比计划的圆满补充了。针对上面百分比无计可施的两个点，vw 和 vh 都能应对。
百分比高度元素的垂直居中
.dialog {
width:50%;
margin-left:-25%;
left:50%;
height:60vh;
margin-top:-30vh;
top:50%;
} 百分比宽度元素牢固长宽比例
.dialog {
width:50vw;
margin-left:-25vw;
left:50%;
height: 50vw;
} 然则遗憾的是 vw 和 vh 存在着不可无视的兼容新题目;
用 rem 模拟 vw & vh
rem只能模拟 vw 和 vh 中的一个。由于平常比较经常使用的是vw，所以我们把 rem 当作 vw 运用。
能够运用剧本盘算 html 的 rem，代码以下
var deviceWidth = window.screen.width;
document.querySelector('html').style.fontSize = (deviceWidth)+'px';百分比宽度元素牢固长宽比例
.dialog {
width: 0.5 rem;
margin-left: -0.25 rem;
left: 50%;
height: 0.25 rem;
}由于 rem 只能模拟 vw vh 的一种 所以这时刻关于百分比高度元素的垂直居中 的完成就无计可施了。
用剧本完成
有极少数规划上的题目 css好像无计可施了。这个合适只能依托全能的剧本了。
