适配手机端的几种写法

1，rem布局，现在普遍常用的方法

一般ui设计师给的页面都是640的，所以

[javascript] view plain copy

1. document.documentElement.clientWidth/6.4+"px";  

项目中，在ps中量的尺寸直接除以100,后面写rem就可以了。
[javascript] view plain copy

1. window.onload=function(){  
2.                 //1.首次加载的时候 调用动态设置rem的api  
3.                 setRemSize();  
4.                 window.addEventListener("resize",setRemSize,false);  
5.                 function setRemSize(){  
6.                 //1.在任何尺寸中都可以获得rem值  
7.                 var _clientWidth=document.documentElement.clientWidth/6.4+"px";  
8.                 //将得到的rem值赋值给根元素的font-size  
9.                 document.documentElement.style.fontSize=_clientWidth;  
10.                 }  
11.         };  

2.百分比布局

这种方法比较古老，做出来的界面在各个分辨率的适配上比较不好，例如一个div在分辨率为320*568是320px * 100px  在375 * 667 的分辨率显示就是 375px * 100px 效果不是等比拉升。

3，按照640等比例缩放。

[html] view plain copy

1. <script type="text/javascript">  
2.             var isios = false;  
3.             ! function(userAgent) {  
4.                 var screen_w = parseInt(window.screen.width),  
5.                     scale = screen_w / 640;  
6.                 if(/Android (d+.d+)/.test(userAgent)) {  
7.                     var version = parseFloat(RegExp.$1);  
8.                     document.write(version > 2.3 ? "<meta name="viewport" content="width=640, initial-scale = " + scale + ",user-scalable=1, minimum-scale = " + scale + ", maximum-scale = " + scale + ", target-densitydpi=device-dpi">" : "<meta name="viewport" content="width=640, target-densitydpi=device-dpi">");  
9.                 } else {  
10.                     isios = true;  
11.                     document.write("<meta name="viewport" content="width=640, initial-scale = " + scale + " ,minimum-scale = " + scale + ", maximum-scale = " + scale + ", user-scalable=no, target-densitydpi=device-dpi">");  
12.                 }  
13.             }(navigator.userAgent);  
14.         </script>