一个菜鸟的互联网技术分享博客
您的位置: 主页 > vue使用rem,实现移动端适配
advertisement

vue使用rem,实现移动端适配

1、首先建立一个rem.js文件,然后把以下代码放到文件里面
  1. (function(designWidth, maxWidth) {  
  2.     var doc = document,  
  3.         win = window,  
  4.         docEl = doc.documentElement,  
  5.         remStyle = document.createElement("style"),  
  6.         tid;  
  7.   
  8.     function refreshRem() {  
  9.         var width = docEl.getBoundingClientRect().width;  
  10.         maxWidth = maxWidth || 540;  
  11.         width > maxWidth && (width = maxWidth);  
  12.         var rem = width * 100 / designWidth;  
  13.         remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';  
  14.     }  
  15.   
  16.     if(docEl.firstElementChild) {  
  17.         docEl.firstElementChild.appendChild(remStyle);  
  18.     } else {  
  19.         var wrap = doc.createElement("div");  
  20.         wrap.appendChild(remStyle);  
  21.         doc.write(wrap.innerHTML);  
  22.         wrap = null;  
  23.     }  
  24.     //要等 viewport 设置好后才能执行 refreshRem,不然 refreshRem 会执行2次;  
  25.     refreshRem();  
  26.   
  27.     win.addEventListener("resize", function() {  
  28.         clearTimeout(tid); //防止执行两次  
  29.         tid = setTimeout(refreshRem, 300);  
  30.     }, false);  
  31.   
  32.     win.addEventListener("pageshow", function(e) {  
  33.         if(e.persisted) { // 浏览器后退的时候重新计算  
  34.             clearTimeout(tid);  
  35.             tid = setTimeout(refreshRem, 300);  
  36.         }  
  37.     }, false);  
  38.   
  39.     if(doc.readyState === "complete") {  
  40.         doc.body.style.fontSize = "16px";  
  41.     } else {  
  42.         doc.addEventListener("DOMContentLoaded", function(e) {  
  43.             doc.body.style.fontSize = "16px";  
  44.         }, false);  
  45.     }  
  46. })(750750);  
2,在main.js中引入rem.js,以上代码是以750px设计稿为例,所有单位缩小100倍(如:189px写成1.89rem)如果设计图尺寸是375,就把代码结尾改成(375,375)
zhangren.online
上一篇:使用Proxy、Reflect实现双向绑定
下一篇:微信浏览器对background-color不公的问题

您可能喜欢

​javascript小数乘法精确率填坑

​javascript小数乘法精确率填坑

​ES6 Promise用法小结

​ES6 Promise用法小结

​js中的深浅拷贝问题简析

​js中的深浅拷贝问题简析

回到顶部