已知:

1、浏览器默认的字号是16px,html{font-size: 87.5%;}(16*0.875 = 14px)。

2、css中的单位换算:rem 与 px 的换算为 px = rem * 设置的根节点字号。

3、注意,html 字体大小最小为 12px;如果设置为10px,则换算后的 px 依然按照 12px 计算

待搞清楚

思路:html的font-size设置为:网页宽度/设计稿宽度*10 px,css设置时就按照设计稿的大小,如宽为10px,css设置成1rem。这样,html的fong-size就相当于等比放大缩小的系数*10。

在网页加载完成后运行如下代码。designWidth是参考的设计稿的网页宽度(我的一般参考375px),maxWidth是设计稿的最大网页宽度,一般为750。运行该函数后,将设计稿的px对应成css的rem就好。比如设计稿中font-size:10px,css为font-size:1rem。

除此之外,在网页代码的头部,加入一行viewport元标签<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

//设置html的font-size
function resizeRem(designWidth, maxWidth) {
    var doc = document,
        win = window,
        docEl = doc.documentElement,
        remStyle = document.createElement("style"),
        tid;
    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        maxWidth = maxWidth || 540;
        width > maxWidth && (width = maxWidth);
        var rem = width * 10 / designWidth;
        remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
    }
    if (docEl.firstElementChild) {
        docEl.firstElementChild.appendChild(remStyle);
    } else {
        var wrap = doc.createElement("div");
        wrap.appendChild(remStyle);
        doc.write(wrap.innerHTML);
        wrap = null;
    }
    //要等 wiewport 设置好后才能执行 refreshRem,不然 refreshRem 会执行2次;
    refreshRem();
    win.addEventListener("resize", function () {
        clearTimeout(tid); //防止执行两次
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener("pageshow", function (e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);
    if (doc.readyState === "complete") {
        doc.body.style.fontSize = "16px";
    } else {
        doc.addEventListener("DOMContentLoaded", function (e) {
            doc.body.style.fontSize = "16px";
        }, false);
    }
}

h5项目自适应字体和宽高。用rem的更多相关文章

  1. 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

    序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...

  2. 翻屏类 h5 适配方案:解决宽高自适应难题

    表格 图片等 宽度自适应  :width:100%;  box-sizing: border-box; 基于淘宝适配方案flexible + 翻屏h5 适配方案adaptive flexible解读及 ...

  3. NGUI 屏幕自适应(初始设定宽高800x480只支持比其大的屏幕)

    自适应讲解部分可以参考以下网址:http://www.xuanyusong.com/archives/2536,下面代码中提到的AdaptiveManualHeight()函数就是参考该文章的. 下面 ...

  4. 【项目笔记】拿宽高前measure(widthMeasureSpec, heightMeasureSpec)的使用技巧

    我们知道获取宽高一般写法是: view.measure(0, 0); view.getMeasuredHeight(); 拿宽高前什么时候可以直接用measure(0, 0);而什么时候不能用meas ...

  5. CSS实现宽度自适应100%,宽高16:9的比例的矩形

    现在我们来讲讲做自适应16:9的矩形要怎么做 第一步先计算高度,假设宽100%,那么高为h=9/16=56.25% 第二步利用之前所说设置padding-bottom方法实现矩形 代码 HTML &l ...

  6. CSS实现宽度自适应100%,宽高16:9的比例的圖片或者矩形

    前言 图片的大小是多少,宽度一定,高度要始终自自适应为16:9. 解决 1通过js,程序算出绝对高度再进行设置.这是解决问题最容易想到的方法. 2.我们的原则是能用css实现的功能尽量用css,这有利 ...

  7. 获取iframe自适应后的宽高

    1.同域 一:引入jquery <script type="text/javascript" src="../jquery.min.js">< ...

  8. cocos2dx获得字体的宽高

    Android: 1.在CCImage中添加下面的方法: //头文件声明略. cocos2d::CCSize CCImage::getStringSize(const char *text, cons ...

  9. js实现字体和容器宽高随窗口改变

    用于字体大小和容器的宽高字体和宽高设为rem就可以了 var html = document.documentElement; function fonts(){ var hW = html.offs ...

  10. 007. 自定义ListBox的item的宽高, 字体居中

    /// <summary> /// 自定义ListBox的item的宽高, 字体居中 /// </summary> /// <param name="sende ...

随机推荐

  1. 巧如范金,精比琢玉,一分钟高效打造精美详实的Go语言技术简历(Golang1.18)

    研发少闲月,九月人倍忙.又到了一年一度的"金九银十"秋招季,又到了写简历的时节,如果你还在用传统的Word文档寻找模板,然后默默耕耘,显然就有些落后于时代了,本次我们尝试使用云平台 ...

  2. 精华推荐 |【深入浅出Sentinel原理及实战】「原理探索专题」完整剖析Alibaba微服务架构体系之轻量级高可用流量控制组件Sentinel(1)

    Sentinel是什么?不要概念混淆啊! 注意:本Sentinel与Redis服务Sentinel是两回事,压根不是一个概念,请大家不要混肴. Alibaba的Sentinel Sentinel是由阿 ...

  3. 何为GUI???

    1.GUI是什么–简介 GUI的全称为Graphical User Interface,图形化界面或图形用户接口,是指采用图形方式显示的计算机操作环境用户接口.与早期计算机使用的命令行界面相比,图形界 ...

  4. python进阶之路12之有参装饰器、多层语法糖、递归函数简介

    多层语法糖 def outter1(func1): print('加载了outter1') def wrapper1(*args, **kwargs): print('执行了wrapper1') re ...

  5. [cocos2d-x]TextureCache和spriteFramecache

    SpriteFrameCache 主要服务于多张碎图合并出来的纹理图片.这种纹理在一张大图中包含了多张小图,直接通过TextureCache引用会有诸多不便,因而衍生出来精灵框帧的处理方式,即把截取好 ...

  6. P7076 [CSP-S2020] 动物园

    题面 动物园里饲养了很多动物,饲养员小 A 会根据饲养动物的情况,按照<饲养指南>购买不同种类的饲料,并将购买清单发给采购员小 B. 具体而言,动物世界里存在 \(2^k\) 种不同的动物 ...

  7. MQ系列11:如何保证消息可靠性传输(除夕奉上)

    MQ系列1:消息中间件执行原理 MQ系列2:消息中间件的技术选型 MQ系列3:RocketMQ 架构分析 MQ系列4:NameServer 原理解析 MQ系列5:RocketMQ消息的发送模式 MQ系 ...

  8. strapi系列--如何自定义非界面化的接口,定制化自己的业务逻辑

    为什么要进行后端定制呢? 在实际开发过程中,项目中有些需求是不需要创建界面化接口的,需要我们定制化自己的业务逻辑,那么我们该如何处理这个需求呢?本文以图文并茂的形式,定制一个我们自己的业务逻辑接口. ...

  9. 对于Java平台的理解

    谈谈你对 Java 平台的理解?"Java 是解释执行",这句话正确吗?   Java 本身是一种面向对象的语言,最显著的特性有两个方面,一是所谓的"一处编译,处处运行& ...

  10. 读Java8函数式编程笔记08_测试、调试和重构

    1. Lambda表达式的单元测试 1.1. 单元测试是测试一段代码的行为是否符合预期的方式 1.2. Lambda表达式没有名字,无法直接在测试代码中调用 1.2.1. 将Lambda表达式放入一个 ...