设备本身的适配策略
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似乎无能为力了。这个适合只能依靠万能的脚本了。