美文网首页
初始化手机端页面字体大小

初始化手机端页面字体大小

作者: 读书的鱼 | 来源:发表于2018-12-17 17:00 被阅读0次

    在我们制作手机端页面的时候,经常会遇到试用rem这个单位,那么需要我们给html设置一个基础的font-size
    我们就拿设计图为750px像素宽度的效果图来说,我们定义一个js文件init.js

    var change = {
        design_width: 640,
        IsPC: function() {
            var userAgentInfo = navigator.userAgent;
            var Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad",
                "iPod"
            ];
            var flag = true;
            for (var v = 0; v < Agents.length; v++) {
                if (userAgentInfo.indexOf(Agents[v]) > 0) {
                    flag = false;
                    break;
                }
            }
            return flag;
        },
        pc_type: 0,
        body: document.getElementsByTagName('html')[0],
        action_flag: true,
        action: function(num, $1) {
            change.design_width = num;
            if ($1) {
                change.pc_type = $1;
            }
            if (this.IsPC()) {
                this.view_width = document.documentElement.clientWidth > num ? num : document.documentElement.clientWidth;
                if (this.pc_type || this.pc_type == 1) {
                    this.body.classList.add('pc_phone');
                } else {
                    this.body.classList.add('pc');
                }
    
            } else {
                this.view_width = document.documentElement.clientWidth < 320 ? num / 2 : document.documentElement.clientWidth;
            }
            this.body.style.opacity = 1;
            this.body.style.fontSize = this.view_width * 100 / num + 'px';
            if (change.action_flag) {
                change.action_flag = false;
                window.addEventListener('resize', function() {
                    change.action(change.design_width);
                }, false);
            }
        }
    }
    change.action(750);
    
    

    注意:
    因为这个文件的时候要放在head里面
    且顺序要先加载这个文件
    再去加载css文件和js文件

    相关文章

      网友评论

          本文标题:初始化手机端页面字体大小

          本文链接:https://www.haomeiwen.com/subject/kyeckqtx.html