移动端web app自适应布局探索与总结

一、困扰多时的问题

在这以前作web app开发的的时候，在自适应方面通常都是宽度经过百分比，高度以iPhone6跟iPhone5之间的一个平衡值写死，咱们的设计稿都是iPhone5 的640 * 1136标准，因此高度通常取个大概值，各类图标的宽高也是取平衡值写死，而后部分样式经过媒体查询来设置，例如背景图的多倍图、基础字体大小、图标宽 高。

这样作的弊端很明显：

1. 作出来的页面在各类手机端看起来的物理大小（高度）是同样的，因此在大屏手机会以为页面稍小，小屏手机页面稍大

2. 若是要使高度能更好的适应各类手机屏幕，须要写太多的媒体查询样式，效率低下

3. 全屏背景图片跟页面元素须要耦合时，元素位置的肯定尤其困难（可能须要经过百分比去肯定元素的横向位置，但始终会有偏差）

4. ...

最近在微博上看到流云诸葛总结的一篇文章《从网易与淘宝的font-size思考前端设计稿与工做流》，其中介绍到的几种web app适配方案，咱们如今的作法刚好是跟拉勾网相似的简单方案，固然就会有上面我提到的一些问题，最后通过预研和demo测试，咱们采起了网易跟淘宝的方案，其实这二者的方案是大同小异，都是基于rem的适配方案。

二、解决问题的方案

网易跟淘宝的方案介绍在上面流云诸葛的文章中已经写的很清楚了，建议能够先看看那篇文章再阅读下面我所说的，可能会更加清晰。

（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跟设计稿的横向宽 的 比例 自动计算出来。

如图iPhone5下面的效果：

iphone6的效果：

能够看出来：html的font-size动态根据deviceWidth改变，图标的宽高、边距等也根据font-size动态按比例变化，大功 告成了？不对，相信机智的你已经看到貌似在iPhone6的下有的图标背景错位了。。是的，这暴露出了一个背景使用雪碧图的一个弊端（因为font- size小数点太多，计算出实际背景图大小background-size跟背景图位置background-position时浏览器精度不够可能就会出现位置的误差（我猜的），这个后面还会详细讲解决方案）

到这里，设置宽高、边距等都OK了，接下来...

（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倍）

最后通过尝试，得出了几种解决方案：
一、如图（推荐方案）：

图标的样式

.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; }

全部相关代码 传送门

二、不使用雪碧图，使用单个背景图，这个时候就不存在background-position的须要，只需设定background-size: contain;便可，这样作的弊端就在于没法使用雪碧图，图片请求增多，适用于页面图标较少的状况

三、使用嵌套img标签，经过绝对定位模拟background-position，具体请看 responsive-sprites，这种作法须要更多的标签，且img图片只能放图标尺寸大小同样的雪碧图，并且不能经过媒体查询使用多倍图

以上3中解决方案第一种最优，固然有些特殊状况可能须要按需选择！

最后发现一篇研究rem产生小数点像素的问题的文章，感兴趣的可戳 《rem 产生的小数像素问题》

三、写在最后

此文章非原创，原地址：https://segmentfault.com/a/1190000003931773?_ea=428115#articleHeader0