webview的弹性布局之rem,em

webview页面的自适应一般有两种方法，即一是JS的计算方法，二是通过css的media设置分档方式。在此主要介绍css的方式。

 html {
     font-size: 16px;
 }
 @media only screen and (min-width:360px){
      html {
         font-size: 18px;
     }
 }
 @media only screen and (min-width:375px){
      html {
         font-size: 19px;
     }
 }
 @media only screen and (min-width:412px){
     html {
         font-size: 21px;
     }
 }

一、设置基准值

设置html的基准值font-size:16px; 然后按照上面的分的iphone4,iphone6和iphone6s的三个分档。

二、选择单位

　　以下的换算都是以基准16px为准，如果是以ihpne6的尺寸测量的设计稿的话，就将 测量的px值/2/19 就可以计算相应的值。

1. rem的方式

　　以rem为单位的话，就是以根元素（body）为标准来换算。

 <div class="welcom-login">
             <div class="logo-login"></div>
             <div class="solo"></div>
 </div>

.welcome-login{
    width: 25rem;   /*  400px(实际宽度) / 16（body基准值） = 所求得的值 rem */
    height: 12.5rem;  /*   200px(实际宽度) / 16（body基准值） = 所求得的值 rem*/
}
.welcome-login .logon-login{
    width: 2.5rem;  /*  40px(实际宽度) / 16（body基准值） = 所求得的值 rem */
    height: 1.25rem;   /*  20px(实际宽度) / 16（body基准值） = 所求得的值 rem */
}

因为rem是以根元素的标准来计算的，所以.logo-login 的换算还是 以实际值 除以的 16。不管里面嵌套多少层，都是以设计稿中测量的px值除以基准值。　

2. em的方式

需要分情况，当前元素是否有设置font-size的大小。

当没有设置font-size时，当前元素的width和height就继承父级元素的font-size，在计算时就以实际px/父元素的实际字体大小（px），就如.welcome-login .logn-login中计算的值一样。

当需要设置font-size时，font-size的换算是除以父元素的实际大小后所的的值；而此时，该元素的widht和height的计算，就以当前元素的font-size的实际大小（px）为基准来计算，如下面.welcome-login中计算的一样。

.welcome-login{
      font-size: 1.5em;   /*  24px(实际字体大小) / 16（父元素的实际字体大小） = 所求得的值 em */
      width: 16.666667em;   /*  400px(实际宽度) / 24（body基准值） = 所求得的值 em */
      height: 8.333333em;  /*   200px(实际宽度) / 24（body基准值） = 所求得的值 em*/
}
.welcome-login .logo-login{
      width: 1.666667em;  /*  40px(实际宽度) / 24（父元素的实际字体大小） = 所求得的值 em */
      height: .833333em;   /*  20px(实际宽度) / 24（父元素的实际字体大小） = 所求得的值 em */
}

更多详细介绍可以参考

http://www.uml.org.cn/html/201207311.asp