标签：
webview页面的自适应一般有两种方法，即一是JS的计算方法，二是通过css的media设置分档方式。在此主要介绍css的方式。
1 body { 2 font-size: 16px; 3 } 4 @media only screen and (min-width:360px){ 5 body { 6 font-size: 18px; 7 } 8 } 9 @media only screen and (min-width:375px){ 10 body { 11 font-size: 19px; 12 } 13 } 14 @media only screen and (min-width:412px){ 15 body { 16 font-size: 21px; 17 } 18 }
一、设置基准值
设置body或者 html的基准值font-size:16px; 然后按照上面的分的iphone4,iphone6和iphone6s的三个分档。
二、选择单位
以下的换算都是以基准16px为准，如果是以ihpne6的尺寸测量的设计稿的话，就将 测量的px值/2/19 就可以计算相应的值。
1. rem的方式
以rem为单位的话，就是以根元素（body）为标准来换算。
1 <div class="welcom-login"> 2 <div class="logo-login"></div> 3 <div class="solo"></div> 4 </div>
.welcome-login{ width: 25rem; /* 40px(实际宽度) / 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.cnblogs.com/tree7/p/5649478.html
