index.html 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <meta name="viewport"
  7. content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  8. <meta name="format-detection" content="telephone=no">
  9. <title>鲸致生活</title>
  10. <script>
  11. // let html = document.documentElement;
  12. // window.rem = html.getBoundingClientRect().width / 7.5;
  13. // html.style.fontSize = window.rem + 'px';
  14. // console.log(window.rem);
  15. ;(function(win,UP){
  16. "use strict";
  17. UP.W=UP.W||{};
  18. UP.W.Rem=UP.W.Rem||{};
  19. var timer=null;
  20. var rem=12;
  21. var doc=win.document;
  22. var docEl=doc.documentElement;
  23. var visualWidth=750;
  24. var vEl=doc.querySelector('meta[name="visual-width"]');
  25. if(vEl){
  26. var vWidth=vEl.getAttribute('width');
  27. if(vWidth){
  28. visualWidth=parseInt(vWidth);
  29. }
  30. }
  31. function refreshRem(){
  32. var width=docEl.getBoundingClientRect().width;
  33. width=(width>768?visualWidth:width);
  34. rem = width/(visualWidth/100);
  35. docEl.style.fontSize=rem+'px';
  36. }
  37. win.addEventListener('resize',function(){
  38. clearTimeout(timer);
  39. timer=setTimeout(refreshRem,300);
  40. },false);
  41. win.addEventListener('pageshow',function(e){
  42. if(e.persisted){
  43. clearTimeout(timer);
  44. timer=setTimeout(refreshRem,300);
  45. }
  46. },false);
  47. if(doc.readyState=='complete'){
  48. doc.body.style.fontSize='12px';
  49. }else{
  50. doc.addEventListener('DOMContentLoader',function(e){
  51. doc.body.style.fontSize='12px';
  52. },false);
  53. }
  54. refreshRem();
  55. UP.W.Rem2px=function(d){
  56. var val=parseFloat(d)*rem;
  57. if(typeof d=='string' && d.match(/rem$/)){
  58. val +='px';
  59. }
  60. return val;
  61. };
  62. UP.W.Rem.px2rem=function(d){
  63. var val=parseFloat(d)/rem;
  64. if(typeof d==='string' && d.match(/px$/)){
  65. val +='rem';
  66. }
  67. return val;
  68. };
  69. })(window,window.UP||(window.UP={}));
  70. </script>
  71. </head>
  72. <body>
  73. <div id="app"></div>
  74. <!-- built files will be auto injected -->
  75. </body>
  76. </html>