zoukankan      html  css  js  c++  java
  • rem布局和使用js rem动态改变字体大小,自适应

    解决rem文字动态改变字体大小:

    <script>

      console.log(window.devicePixelRatio);

      var iScale = 1;

      iScale = iScale/window.devicePixelRatio;

      document.write('<meta name="viewport" content="width=device-width,user-scable=no,initial-scale=' + iScale + ',minimum-scale=' + iScale + ',maximum-scale=' + iScale + '"/>');

      //console.log(document.documentElement.clientWidth);

      var iWidth = document.documentElement.clientWidth/16;

      document.getElementsByTagName('html')[0].style.fontSize = iWidth + 'px';

    </script>

    rem布局:

    var fun = function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth; 
                if (!clientWidth) return;
                //这里是假设在750px宽度设计稿的情况下,1rem = 100px;
                //可以根据实际需要修改
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    }
    fun(document, window)
  • 相关阅读:
    run blackberry Sim&MDS4.7
    jsadd input name
    java memory
    silverlight Pivot Hearder
    eclipse tomcat server
    Monitor.Wait初探(5)
    Monitor.Wait初探(4)
    Monitor.Wait初探(2)
    解决远程注册表打不开,Cannot open HKEY_LOCAL_MACHIN…
    Windows界面自动化技术发展概要(二)
  • 原文地址:https://www.cnblogs.com/xzybk/p/12033307.html
Copyright © 2011-2022 走看看