适配手机端的几种写法

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

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

[javascript]  view plain  copy
  1. document.documentElement.clientWidth/6.4+"px";  
项目中,在ps中量的尺寸直接除以100,后面写rem就可以了。
[javascript]  view plain  copy
  1. window.οnlοad=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>  
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页