• 动态端口定义字体大小的两种方法


    实现效果:根据屏幕大小自动调整字体大小

    1.普通方法

    $(function(){
    function setRem(){
    var clientWidth=$(window).width();
    var nowRem=(100*clientWidth/375);/*375这个值是设计图中测量值的一半*/
    $("html").css("font-size",parseInt(nowRem, 10)+"px");
    };
    setRem();
    $(function(){
    var timer;
    $(window).bind("resize",function(){
    clearTimeout(timer)
    timer=setTimeout(function(){
    setRem();
    }, 100)
    })
    });
    });

    2.移动设备,带事件操作

    (function () {
    var supportsOrientationChange = 'onorientationchange' in window ? 'orientationchange' : 'resize';
    var timeoutId;
    function setRem() {
    var clientWidth = document.documentElement.clientWidth;
    var nowPX = clientWidth / 375 * 100;
    document.documentElement.style.fontSize = nowPX + 'px';
    }
    setRem();
    window.addEventListener(supportsOrientationChange, function () {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(function () {
    setRem();
    }, 300);
    }, false);
    })();
  • 相关阅读:
    第八节 JS运动基础
    第七节 DOM操作应用-高级
    第六节 DOM操作应用
    第五讲 DOM基础
    第二节 数学基础与语言学基础
    第一节 自然语言处理概论
    第0节 课程简述
    第四节 定时器
    基本概念
    常用命令
  • 原文地址:https://www.cnblogs.com/zeussbook/p/9101083.html
Copyright © 2020-2023  润新知