最近写了不少的h5页面和web项目开发,但是对于自适应布局的设置,团队里一直没有一个统一的标准,也很可能真的没有什么标准,可能是我对统一性执念太大。
在这之前做Web App开发的的时候,在自适应方面一般都是宽度通过百分比,高度以iPhone6跟iPhone5之间的一个平衡值写死,我们的设计稿都是iPhone5的640 * 1136标准,所以高度一般取个大概值,各种图标的宽高也是取平衡值写死,然后部分样式通过媒体查询来设置,例如背景图的多倍图、基础字体大小、图标宽高。
但是这样做有一个问题,就是做出来的页面在各种手机端看起来的物理大小(高度)是一样的,所以在大屏手机会觉得页面稍小,小屏手机页面稍大。设计也经常找我们修改字体大小,间距问题,哎。
有时候,会使用一些框架默认的单位设置,或自动化工具的智能设置。 我始终没弄明白怎么个算法,所以就扒拉些大神的文章,这里通过自己的理解,写个小结。
那么html5该如何去做众多移动设备的适配呢?为了完成工作,我们需要找寻更简单更有效率的方法。
方案一:
(1)方案的简单介绍: 基于rem
前提:页面元素的布局尺寸全都以设计稿为基准等比例设置。
给html根节点设置一个基础font-size值,然后页面的所有元素布局均相对于该font-size值采用rem单位设定。那么基础的font-size值该如何取呢?
假如通过媒体查询设置font-size,只能解决一部分的情况,而且并不能完成适配,因为手机屏幕宽度类型实在太多了,所以font-size的取值要通过js计算,取当前viewport的deviceWidth与设计稿的宽 的 比例值,例如:我们的设计稿尺寸都是640px的,iphone5的deviceWidth是320px,那么计算出来的font-size值就是 320 / 640 = 0.5,因为得出的font-size太小,不方便计算,且有的浏览器可能不兼容太小字号,所以将font-size放大100倍,所以最终计算出来的font-size为 320 / 640 * 100 = 50(px); 当然,这个值是根据设计稿来计算的,所以根据计算规则,下面列出几种常见设计稿相应的font-size值:
deviceWidth = 320,font-size = 320 / 6.4 = 50px
deviceWidth = 375,font-size = 375 / 6.4 = 58.59375px
deviceWidth = 414,font-size = 414 / 6.4 = 64.6875px
deviceWidth = 500,font-size = 500 / 6.4 = 78.125px
可在script标签加上如下代码:
(function () {
document.addEventListener('DOMContentLoaded', function () {
var html = document.documentElement;
var windowWidth = html.clientWidth;
html.style.fontSize = windowWidth / 6.4 + 'px';
// 等价于html.style.fontSize = windowWidth / 640 * 100 + 'px';
}, false);
})();
// 这个6.4就是根据设计稿的横向宽度来确定的,假如你的设计稿是750
// 那么 html.style.fontSize = windowWidth / 7.5 + 'px';
至此,font-size的基础值就确定好了,而且知道该font-size值是手机deviceWidth跟设计稿的比例值 的 100倍(重要)
(2)那么页面元素该如何设置宽高、边距
例如:一个设计稿宽高为140px的图标,左边距为50px,那么它的css应该这样写
.icon {
width: 1.4rem; /* 像素换算rem:140px / 100 = 1.4rem */
height: 1.4rem;
margin: 0 0 0 .5rem;
}
因为html的font-size是放大了100倍,所以计算rem时,要用设计稿的实际像素除以100,140px / 100 = 1.4rem; 最后实际的像素大小就会由deviceWidth跟设计稿的横向宽 的 比例 自动计算出来。
但是,这暴露出了一个背景使用雪碧图的一个弊端(由于font-size小数点太多,计算出实际背景图大小background-size跟背景图位置background-position时浏览器精度不够可能就会出现位置的偏差),通过换算rem设置background-size跟background-position的时候,在一些手机型号下会出现背景图错位的情况,可是如果不用rem设置的话,又不能达到适配的目的。(background-size、background-position的rem换算方法跟前面讲的宽高设定一样,都是设计稿尺寸(这时应该是雪碧图的原始尺寸)除以100倍)
最简单的方法就是,不使用雪碧图,使用单个背景图,这个时候就不存在background-position的需要,只需设定background-size: contain;即可,这样做的弊端就在于无法使用雪碧图,图片请求增多,适用于页面图标较少的情况。
方案二:
媒体查询:
html {
font-size: 10px
}
@media screen and (min-width: 321px) and (max-width: 375px) {
html {
font-size: 11px
}
}
@media screen and (min-width: 376px) and (max-width: 414px) {
html {
font-size: 12px
}
}
@media screen and (min-width: 415px) and (max-width: 639px) {
html {
font-size: 15px
}
}
@media screen and (min-width: 640px) and (max-width: 719px) {
html {
font-size: 20px
}
}
@media screen and (min-width: 720px) and (max-width: 749px) {
html {
font-size: 22.5px
}
}
@media screen and (min-width: 750px) and (max-width: 799px) {
html {
font-size: 23.5px
}
}
@media screen and (min-width: 800px) {
html {
font-size: 25px
}
}
方案三:
<script>
document.documentElement.style.fontSize = window.innerWidth/6.40 + 'px';
</script>