A-A+

移动端调整rem的代码

2016年03月26日 JavaScript 暂无评论 阅读 165 次

1.以320宽的设计图为准,计算结果为10px为1rem

  1. <script>
  2. function setFontSize(){
  3.         document.documentElement.style.fontSize = document.body.clientWidth* (10/320) + 'px';
  4.     }
  5.     setFontSize();
  6.     window.onresize =setFontSize;
  7. </script>

2.可计算dpr,font-size为当前宽度的10分之一

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1
  2. .0, user-scalable=no"/>
  3.   <script>
  4. !function(e, t) {
  5. function i() {
  6. var t = n.getBoundingClientRect().width;
  7.         t / m > 540 && (t = 540 * m);
  8. var i = t / 10;
  9.         n.style.fontSize = i + "px",
  10.         d.rem = e.rem = i
  11.     }
  12. var a, r = e.document, n = r.documentElement, o = r.querySelector('meta[name="viewport"]'), l = r.querySelector('meta[name="flexible"]'), m = 0, s = 0, d = t.flexible || (t.flexible = {});
  13. if (o) {
  14.         console.warn("将根据已有的meta标签来设置缩放比例");
  15. var p = o.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
  16.         p && (s = parseFloat(p[1]),
  17.         m = parseInt(1 / s))
  18.     } else if (l) {
  19. var c = l.getAttribute("content");
  20. if (c) {
  21. var u = c.match(/initial\-dpr=([\d\.]+)/)
  22.               , f = c.match(/maximum\-dpr=([\d\.]+)/);
  23.             u && (m = parseFloat(u[1]),
  24.             s = parseFloat((1 / m).toFixed(2))),
  25.             f && (m = parseFloat(f[1]),
  26.             s = parseFloat((1 / m).toFixed(2)))
  27.         }
  28.     }
  29. if (!m && !s) {
  30. var v = (e.navigator.appVersion.match(/android/gi),
  31.         e.navigator.appVersion.match(/iphone/gi))
  32.           , h = e.devicePixelRatio;
  33.         m = v ? h >= 3 && (!m || m >= 3) ? 3 : h >= 2 && (!m || m >= 2) ? 2 : 1 : 1,
  34.         s = 1 / m
  35.     }
  36. if (n.setAttribute("data-dpr", m),
  37.     !o)
  38. if (o = r.createElement("meta"),
  39.         o.setAttribute("name""viewport"),
  40.         o.setAttribute("content""initial-scale=" + s + ", maximum-scale=" + s + ", minimum-scale=" + s + ", user-scalable=no"),
  41.         n.firstElementChild)
  42.             n.firstElementChild.appendChild(o);
  43. else {
  44. var x = r.createElement("div");
  45.             x.appendChild(o),
  46.             r.write(x.innerHTML)
  47.         }
  48.     e.addEventListener("resize"function() {
  49.         clearTimeout(a),
  50.         a = setTimeout(i, 300)
  51.     }, !1),
  52.     e.addEventListener("pageshow"function(e) {
  53.         e.persisted && (clearTimeout(a),
  54.         a = setTimeout(i, 300))
  55.     }, !1),
  56. "complete" === r.readyState ? r.body.style.fontSize = 12 * m + "px" : r.addEventListener("DOMContentLoaded"function(e) {
  57.         r.body.style.fontSize = 12 * m + "px"
  58.     }, !1),
  59.     i(),
  60.     d.dpr = e.dpr = m,
  61.     d.refreshRem = i,
  62.     d.rem2px = function(e) {
  63. var t = parseFloat(e) * this.rem;
  64. return "string" == typeof e && e.match(/rem$/) && (t += "px"),
  65.         t
  66.     }
  67.     ,
  68.     d.px2rem = function(e) {
  69. var t = parseFloat(e) / this.rem;
  70. return "string" == typeof e && e.match(/px$/) && (t += "rem"),
  71.         t
  72.     }
  73. }(window, window.lib || (window.lib = {}));
  74. </script>

3.与第一种差不多,只不过用jq实现

  1. <script>
  2.     $(function()
  3.     {
  4. function screenSizeSetting()
  5.         {
  6.             $('html').css("font-size",$(window).width()*125/320+"%");
  7.         }
  8.         $(function()
  9.         {
  10.             screenSizeSetting();
  11.             $(window).resize(screenSizeSetting);
  12.         });
  13.     });
  14. </script>

//动态设置html的字体大小,默认html{font-size:50px}

  1. (function () {
  2.     document.addEventListener('DOMContentLoaded', function () {
  3. var html = document.documentElement;
  4. var windowWidth = html.clientWidth; html.style.fontSize = windowWidth / 7.5 + 'px';
  5. //等价于html.style.fontSize = windowWidth / 720 * 100 + 'px';
  6. //同理可设6.4为640对应的情况
  7.     }, false);
  8. })();

参考:http://www.cocoachina.com/webapp/20141224/10746.html

 

5.有点诡异,记录一下

  1. var html=document.getElementsByTagName('html')[0];
  2. function font(){
  3.     var width=document.body.scrollWidth;
  4.     html.style.fontSize= width*125/320+'%';
  5. }
  6. font();
  7. window.onresize = function(){
  8.     font()
  9. };
  10. var nav = document.getElementsByClassName('nav')[0];
  11. var navli=nav.getElementsByTagName('li');
  12. var len=navli.length;
  13. for(var i=0;i<len;i++){
  14.     navli[i].onclick=function(){
  15.         for(var j=0;j<len;j++){
  16.             navli[j].className=''
  17.         }
  18.         this.className='active'
  19.     }
  20. }
标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录