在这之前做webApp开发的的时候，在自适应方面一般都是宽度通过百分比，高度以iPhone6跟iPhone5之间的一个平衡值写死，我们的设计稿都是iPhone5的*标准，所以高度一般取个大概值，各种图标的宽高也是取平衡值写死，然后部分样式通过媒体查询来设置，例如背景图的多倍图、基础字体大小、图标宽高等。
?这样做会存在好多弊端
做出来的页面在各种手机端看起来的物理大小（高度）是一样的，所以在大屏手机会觉得页面稍小，小屏手机页面稍大
如果要使高度能更好的适应各种手机屏幕，需要写太多的媒体查询样式，效率低下
全屏背景图片跟页面元素需要耦合时，元素位置的确定尤为困难（可能需要通过百分比去确定元素的横向位置，但始终会有误差）
2、解决问题的方案（1）方案的简单介绍:基于rem注意：页面元素的布局尺寸全都以设计稿为基准等比例设置。
给html根节点设置一个基础font-size值，然后页面的所有元素布局均相对于该font-size值采用rem单位设定。那么基础的font-size值该如何取呢？
假如通过媒体查询设置font-size，只能解决一部分的情况，而且并不能完成适配，因为手机屏幕宽度类型实在太多了，所以font-size的取值要通过js计算，取当前viewport的deviceWidth与设计稿的宽的比例值，例如：我们的设计稿尺寸都是px的，iphone5的deviceWidth是px，那么计算出来的font-size值就是/=0.5，因为得出的font-size太小，不方便计算，且有的浏览器可能不兼容太小字号，所以将font-size放大倍，所以最终计算出来的font-size为/*=50(px);当然，这个值是根据设计稿来计算的，所以根据计算规则，下面列出几种常见设计稿相应的font-size值：
deviceWidth=，font-size=/6.4=50pxdeviceWidth=，font-size=/6.4=58.59pxdeviceWidth=，font-size=/6.4=64.pxdeviceWidth=，font-size=/6.4=78.px
可在script标签加上如下代码：
(function(){document.addEventListener(DOMContentLoaded,function(){varhtml=document.documentElement;varwindowWidth=html.clientWidth;html.style.fontSize=windowWidth/6.4+px;//等价于html.style.fontSize=windowWidth/*+px;},false);})();//这个6.4就是根据设计稿的横向宽度来确定的，假如你的设计稿是//那么html.style.fontSize=windowWidth/7.5+px;
至此，font-size的基础值就确定好了，而且知道该font-size值是手机deviceWidth跟设计稿的比例值的倍（重点）
（2）那么页面元素该如何设置宽高、边距
例如：一个设计稿宽高为px的图标，左边距为50px，那么它的css应该这样写：
.icon{width:1.4rem;/*像素换算rem：px/=1.4rem*/height:1.4rem;margin:.5rem;}
因为html的font-size是放大了倍，所以计算rem时，要用设计稿的实际像素除以，px/=1.4rem;最后实际的像素大小就会由deviceWidth跟设计稿的横向宽的比例自动计算出来。
（3）其他元素的字体大小该如何设置mediascreenand(max-width:px){body{font-size:14px;}}mediascreenand(min-width:px)and(max-width:px){body{font-size:16px;}}mediascreenand(min-width:px)and(max-width:px){body{font-size:17px;}}mediascreenand(min-width:px){body{font-size:18px;}}为什么不用rem呢？因为有一种叫做点阵字体的存在，也叫作位图字体，位图我们都知道，跟矢量图是有区别的，就是放大会模糊，所以点阵字体也是放大会模糊的，如果根据rem设置字体大小，字体会自由缩放，可能就会导致点阵字体模糊，所以需要设定使用几种固定大小的字体。不过，在正常情况下，系统自带的字体都是矢量字体，所以使用rem为单位是没有问题的，除非你的网页需要用到特殊的点阵字体；
webApp开发的路还很长，我们难免有疏漏的地方，所以我们一直在不断的探索中前进，大家觉得好就点个赞，给我们一次鼓励，让我们做的更好；
赞赏