百度 前端 rem 适配 和 阿里 前端 rem 适配

阿里 

<script>
  var html = document.documentElement;
  window.rem = html.getBoundingClientRect().width / 37.5;
  html.style.fontSize = window.rem + 'px';
  </script>

阿里2 

<script>
  (function(doc, win) {
  var docEle = doc.documentElement,
  evt = "onorientationchange" in window ? "orientationchange" : "resize",
  fn = function() {
  var width = docEle.clientWidth;
  width && (docEle.style.fontSize = 10 * (width / 375) + "px")
  }
  win.addEventListener(evt, fn, false);
  doc.addEventListener("DOMContentLoaded", fn, false)
   
  }(document, window))
  </script>

 

百度

 (function () {
var newFontSize = window.getComputedStyle(document.documentElement)['font-size'];
var fontSizeScale = 16 / parseFloat(newFontSize.replace('px','')) ;
//获取屏幕大小
var html = document.documentElement;
document.addEventListener('DOMContentLoaded', function () {
resetRem();
resetScreen();
});
window.addEventListener('load', function () {
setTimeout(resetRem, 300);
resetScreen();
});
window.addEventListener('resize', function () {
setTimeout(resetRem, 300);
resetScreen();
});
function resetRem() {
html.style.fontSize = html.clientWidth / 20 * fontSizeScale + 'px';
console.log(html.clientWidth);
console.log(html.style.fontSize);
}
function resetScreen() {
window.scrollTo(0,0);
// var height = html.clientHeight || window.innerHeight;
// var width = html.clientWidth || window.innerWidth;
// document.querySelector('body').style.height = height + 'px';
// document.querySelector('body').style.width = width + 'px';
// document.querySelector('body').style.margin = 0;
// document.querySelector('body').style.padding = 0;
}
resetRem();
})();
posted @ 2018-06-25 11:02  IT刘磊  阅读(773)  评论(0编辑  收藏  举报