手机端适配策略以及实现

设备自己的适配策略

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彷佛无能为力了。这个适合只能依靠万能的脚本了。