rem.js 866 B

12345678910111213141516171819202122232425262728293031
  1. ;
  2. (function(win) {
  3. var doc = win.document;
  4. var docEl = doc.documentElement;
  5. var tid;
  6. function refreshRem() {
  7. // 获取屏幕宽度
  8. var width = docEl.getBoundingClientRect().width;
  9. var rem = width / 7.5; // 将屏幕宽度分成6.4份, 1份为1rem 320/6.4 = 50
  10. // 让html的fontSize = 50px 1rem = 50px
  11. docEl.style.fontSize = rem + 'px';
  12. // 320 /6.4 = 50 html->50 1rem 50
  13. // 640 /6.4 = 100 html-> 100 100
  14. }
  15. win.addEventListener('resize', function() {
  16. clearTimeout(tid);
  17. tid = setTimeout(refreshRem, 10);
  18. }, false);
  19. win.addEventListener('pageshow', function(e) {
  20. if (e.persisted) {
  21. clearTimeout(tid);
  22. tid = setTimeout(refreshRem, 10);
  23. }
  24. }, false);
  25. refreshRem();
  26. })(window);