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

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

作者: 读书的鱼 | 来源:发表于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文件

相关文章

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

    在我们制作手机端页面的时候,经常会遇到试用rem这个单位,那么需要我们给html设置一个基础的font-size我...

  • 手机移动端网页确定是否横屏

    刚接触手机移动端网页,除了使用rem定义字体大小外还遇到了手机端其他的问题,比如手机端横屏怎么办?在竖屏时,页面显...

  • 人人商城

    官方大白话: 积分表: 多商户端页面 手机端全部订单对应的页面 手机端订单详情页面 人人商城主商户增加页面的应用未...

  • 移动端web页面适配

    移动端Web页面,即常说的H5页面、手机页面、webview页面等。 手机设备屏幕尺寸不一,在做移动端的Web页面...

  • 设置手机端字体大小

    //获取屏幕宽度 var htmlW = document.documentElement.clientWidth...

  • 如何禁止移动端input输入时页面放大

    如何禁止移动端input输入时页面放大 设置meta 标签 还要设置input的字体大小不能小于12px

  • vue-cli 【flexible】屏幕字体自适应布局及配置

    0.前言: 很多前端小伙伴在写页面尤其是移动端页面的时候,要求页面布局以及字体大小随屏幕宽度变化而随之按比例自适应...

  • Nginx教程6-适配PC或移动设备

    1.Nginx适配介绍 Ⅰ.目的:电脑浏览器访问展示pc端的页面,手机端浏览器访问展示手机端的页面,两套页面,两个...

  • 移动端适配问题收集

    重置样式相关移动端浏览器(部分iphone)横竖屏切换时,字体大小变化检索或设置移动端页面中对象文本的大小调整。该...

  • 手机端页面开发

    对于手机端页面开发。我们先有一定的基础知识。 1.像素基础知识 px:逻辑像素。浏览器使用的是逻辑像素em:相对单...

网友评论

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

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