挪动端webapp自适应规划探究与总结

1、搅扰多时的题目

在这之前做web app开辟的的时刻，在自顺应方面平常都是宽度经由历程百分比，高度以iPhone6跟iPhone5之间的一个均衡值写死，我们的设想稿都是iPhone5的640 * 1136规范，所以高度平常取个也许值，种种图标的宽高也是取均衡值写死，然后部份款式经由历程媒体查询来设置，比方背景图的多倍图、基本字体大小、图标宽高。

如许做的弊病很明显：

1. 做出来的页面在种种手机端看起来的物理大小（高度）是一样的，所以在大屏手时机以为页面稍小，小屏手机页面稍大

2. 如果要使高度能更好的顺应种种手机屏幕，须要写太多的媒体查询款式，效力低下

3. 全屏背景图片跟页面元素须要耦应时，元素位置的一定尤其难题（能够须要经由历程百分比去一定元素的横向位置，但一直会有误差）

4. &＃8230;

最近在微博上看到流云诸葛总结的一篇文章《从网易与淘宝的font-size思索前端设想稿与工作流》，个中引见到的几种web app适配计划，我们如今的做法恰好是跟拉勾网相似的简朴计划，固然就会有上面我提到的一些题目，末了经由预研和demo测试，我们采取了网易跟淘宝的计划，实在这两者的计划是迥然不同，都是基于rem的适配计划。

2、处理题目标计划

网易跟淘宝的计划引见在上面流云诸葛的文章中已写的很清楚了，发起能够先看看那篇文章再浏览下面我所说的，能够会越发清楚。

（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）那末页面元素该怎样设置宽高、边距&＃8230;

比方：一个设想稿宽高为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跟设想稿的横向宽 的 比例 自动盘算出来。

如图iPhone5下面的结果：

iphone6的结果：

能够看出来：html的font-size动态依据deviceWidth转变，图标的宽高、边距等也依据font-size动态按比例变化，功德圆满了？不对，置信机灵的你已看到貌似在iPhone6的下有的图标背景错位了。。是的，这暴露出了一个背景运用雪碧图的一个弊病（因为font-size小数点太多，盘算涌现实背景图大小background-size跟背景图位置background-position时浏览器精度不够能够就会涌现位置的误差（我猜的），这个背面还会细致讲处理计划）

到这里，设置宽高、边距等都OK了，接下来&＃8230;

（3）其他元素的字体大小该怎样设置？

在流云诸葛的文章中讲到，网易跟淘宝的做法都是运用分外的媒体查询设置几种字体大小，比方：

@media screen and (max-width: 320px) {
body{font-size: 14px;}
}
@media screen and (min-width: 321px) and (max-width: 413px) {
body{font-size: 16px;}
}
@media screen and (min-width: 414px) and (max-width: 639px) {
body{font-size: 17px;}
}
@media screen and (min-width: 640px) {
body{font-size: 18px;}
}

可为什么不必rem呢？后往来来往查了一番材料，发明有一种叫做点阵字体的存在（什么是点阵字体），也叫作位图字体，位图我们都晓得，跟矢量图是有区分的，就是放大会隐约，所以点阵字体也是放大会隐约的，如果依据rem设置字体大小，字体味自在缩放，能够就会致使点阵字体隐约，所以须要设定运用几种牢固大小的字体。不过，在一般状况下，体系自带的字体都是矢量字体，所以运用rem为单元是没有题目标，除非你的网页须要用到特别的点阵字体。

总结：如果网页没有用到特别的点阵字体，字体单元运用rem，如果用到了点阵字体，字体须要经由历程媒体查询设置几种牢固大小的字体

（4）关于背景图片的错位题目

上面已发明了，经由历程换算rem设置background-size跟background-position的时刻，在一些手机型号下会涌现背景图错位的状况，但是如果不必rem设置的话，又不能到达适配的目标。（background-size、background-position的rem换算要领跟前面讲的宽高设定一样，都是设想稿尺寸（这时候应当是雪碧图的原始尺寸）除以100倍）

末了经由尝试，得出了几种处理计划：
1、如图（引荐计划）：

图标的款式

.icon {
width: 1.4rem;
height: 1.4rem;
background-image: url(sprite.png);
background-repeat: no-repeat;
background-size: 1.4rem;
}
.icon3 {
background-position: 0 -2.8rem;
}

处理要领，如图：

代码以下：

.icon-fix {
background: none;
position: relative;
overflow: hidden;
}
.icon-fix:after {
content: '';
display: block;
width: 10000%;
height: 10000%;
position: absolute;
left: 0;
top: 0;
background-image: url(sprite.png);
background-repeat: no-repeat;
background-size: 140rem;
-webkit-transform-origin: 0 0;
-webkit-transform: scale(.01);
transform-origin: 0 0;
transform: scale(.01);
}
.icon3:after {
background-position: 0 -280rem;
}

一切相干代码 传送门

2、不运用雪碧图，运用单个背景图，这个时刻就不存在background-position的须要，只需设定background-size: contain;即可，如许做的弊病就在于没法运用雪碧图，图片要求增加，适用于页面图标较少的状况

3、运用嵌套img标签，经由历程相对定位模仿background-position，详细请看 responsive-sprites，这类做法须要更多的标签，且img图片只能放图标尺寸大小一样的雪碧图，而且不能经由历程媒体查询运用多倍图

以上3中处理计划第一种最优，固然有些特别状况能够须要按需挑选！

末了发明一篇研讨rem发生小数点像素的题目标文章，感兴趣的可戳 《rem 发生的小数像素题目》

3、写在末了

关于web app的探究之路还很长，以上地道个人在进修历程的一些探究和研讨，一定会有不足和讹夺的处所，只要在不停的实践中去修改。如果人人发明个中有错或不好的处所，迎接提出共同研讨，也迎接人人有更好的计划能够跟我分享研讨！

谢谢你的浏览！