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)
  • 相关阅读:
    selective search生成.mat文件
    2014 百度之星 1003 题解 Xor Sum
    hdu 2544 最短路
    表解锁
    第 10 章 数据结构
    MySQL Study之--Percona Server版本号
    const 不再迷茫
    opecv2 MeanShift 使用均值漂移算法查找物体
    server用JDBC对mysql数据库进行操作
    Django Admin site 显示问题
  • 原文地址:https://www.cnblogs.com/xzybk/p/12033307.html
Copyright © 2011-2022 走看看